ツールボックス、 タブ
ツールボックスの [HTML] タブには、Web ページや Web フォームで利用できるコンポーネントが用意されています。このタブを表示するには、まず編集するドキュメントを HTML デザイナーで開きます。[表示] メニューの [ツールボックス] をクリックし、次にツールボックスの [HTML] タブをクリックします。
[HTML] タブのツールのインスタンスを作成するには、ツールをダブルクリックして現在のカーソルの場所でドキュメントに追加するか、またはツールを選択して編集領域上の目的の位置にドラッグします。
タスク
UI 要素
[HTML] タブで既定で利用できるツールを次に示します。
Pointer
このツールは、ツールボックスの任意のタブが開いているときに既定で選択されています。削除することはできません。ポインターを使って、オブジェクトをデザイン ビュー領域にドラッグしたり、オブジェクトのサイズを変更したり、ページやフォーム上でオブジェクトを配置し直したりできます。詳細については、「How to: Manage the Toolbox Window」および「How to: Manipulate Toolbox Tabs」を参照してください。
[Input (Button)]
type="button" の input 要素を挿入します。表示されるテキストを変更するには、name プロパティを編集します。既定では、最初のボタンに id="Button1"、2 番目のボタンに id="Button2" が挿入されます。
デザイン ビュー領域に [Input (Button)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Button1" type="button" value="Button" name="Button1">
詳細については、「HTML Input Controls」、「HtmlInputButton サーバー コントロール宣言構文」、「How to: Create Scripts and Edit Event Handlers」、「Button Web Server Controls Overview」、「HtmlInputButton」、「HtmlButton」、および「Button」を参照してください。
[Input (Reset)]
type="reset" の input 要素を挿入します。表示されるテキストを変更するには、name プロパティを編集します。既定では、最初のリセット ボタンに id="Reset1"、2 番目のリセット ボタンに id="Reset2" が挿入されます。
デザイン ビュー領域に [Input (Reset)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Reset1" type="reset" value="Reset" name="Reset1">
詳細については、「HTML Input Controls」、「HtmlInputReset サーバー コントロールの宣言構文」、「HtmlInputButton」、および「Button」を参照してください。
[Input (Submit)]
type="submit" の input 要素を挿入します。表示されるテキストを変更するには、name プロパティを編集します。既定では、最初の送信ボタンに id="Submit1"、2 番目の送信ボタンに id="Submit2" が挿入されます。
デザイン ビュー領域に [Input (Submit)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Submit1" type="submit" value="Submit" name="Submit1">
詳細については、「HTML Input Controls」、「HtmlInputSubmit サーバー コントロールの宣言構文」、「HtmlInputButton」、および「Button」を参照してください。
[Input (Text)]
ドキュメントに type="text" の input 要素を挿入します。表示される既定のテキストを変更するには、value 属性を編集します。既定では、最初のテキスト フィールドに id="Text1"、2 番目のテキスト フィールドに id="Text2" が挿入されます。
デザイン ビュー領域に [Input (Text)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Text1" TYPE="text" value="Text Field" name="Text1">
詳細については、「HTML Input Controls」、「HtmlInputText サーバー コントロール宣言構文」、「TextBox Web Server Control Overview」、「HtmlInputText」、および「TextBox」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。詳細については、「Validating User Input in ASP.NET Web Pages」を参照してください。
[Input (File)]
ドキュメントに type="file" の input 要素を挿入します。既定では、最初のファイル フィールドに id="File1"、2 番目のファイル フィールドに id="File2" が挿入されます。
デザイン ビュー領域に [Input (File)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="File1" type="file" name="File1">
詳細については、「HTML Input Controls」、「HtmlInputFile サーバー コントロール宣言構文」、および「HtmlInputFile」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。詳細については、「Validating User Input in ASP.NET Web Pages」を参照してください。
[Input (Password)]
type="password" の input 要素を挿入します。既定では、最初のパスワード フィールドに id="Password1"、2 番目のパスワード フィールドに id="Password2" が挿入されます。
デザイン ビュー領域に [Input (Password)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Password1" type="password" name="Password1">
詳細については、「HTML Input Controls」、「HtmlInputPassword サーバー コントロールの宣言構文」、「How to: Set a TextBox Web Server Control for Password Entry」、および「Walkthrough: Validating User Input in a Web Forms Page」を参照してください。
セキュリティに関するメモ アプリケーションがユーザー名とパスワードを伝送する場合、SSL (Secure Socket Layer) を使用して伝送を暗号化するように Web サイトを設定します。詳細については、IIS Operations Guide の「Securing Connections with SSL」を参照してください。また、すべてのユーザー入力を検証することをお勧めします。詳細については、「Validating User Input in ASP.NET Web Pages」を参照してください。
[Input (Checkbox)]
type="checkbox" の input 要素を挿入します。表示されるテキストを変更するには、name プロパティを編集します。既定では、最初のチェック ボックスに id="Checkbox1"、2 番目のチェック ボックスに id="Checkbox2" が挿入されます。
デザイン ビュー領域に [Input (Checkbox)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Checkbox1" type="checkbox" name="Checkbox1">
詳細については、「HTML Input Controls」、「HtmlInputCheckBox サーバー コントロールの宣言構文」、「CheckBox and CheckBoxList Web Server Controls Overview」、「HtmlInputCheckBox」、および「CheckBox」を参照してください。
[Input (Radio)]
type="radio" の input 要素を挿入します。表示されるテキストを変更するには、name プロパティを編集します。既定では、最初のオプション ボタンに id="Radio1"、2 番目のオプション ボタンに id="Radio2" が挿入されます。
デザイン ビュー領域に [Input (Radio)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Radio1" type="radio" name="Radio1">
詳細については、「HTML Input Controls」、「HtmlInputRadioButton サーバー コントロール宣言構文」、「RadioButton and RadioButtonList Web Server Controls Overview」、「HtmlInputRadioButton」、および「RadioButton」を参照してください。
[Input (Hidden)]
type="hidden" の input 要素を挿入します。既定では、最初の隠しフィールドに id="Hidden1"、2 番目の隠しフィールドに id="Hidden2" が挿入されます。
デザイン ビュー領域に [Input (Hidden)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Hidden1" type="hidden" name="Hidden1">
詳細については、「HTML Input Controls」、「HtmlInputHidden サーバー コントロールの宣言構文」、および「HtmlInputHidden」を参照してください。
[Textarea]
textarea 要素を挿入します。テキスト領域のサイズを変更するか、スクロール バーを使用して、表示領域を超えるテキストを表示できます。表示される既定のテキストを変更するには、value 属性を編集します。既定では、最初のテキスト領域に id="textarea1"、2 番目のテキスト領域に id=" textarea 2" が挿入されます。
デザイン ビュー領域に [Textarea] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<textarea id=" textarea 1 name=" textarea 1" rows=2 cols=20></textarea>
詳細については、「HtmlTextArea サーバー コントロールの宣言構文」、「HtmlTextArea」、および「TextBox」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。詳細については、「Validating User Input in ASP.NET Web Pages」を参照してください。
テーブル
table 要素を挿入します。
デザイン ビュー領域に [Table] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>
詳細については、「HtmlTable サーバー コントロールの宣言構文」、「Table, TableRow, and TableCell Web Server Control Overview」、「HtmlTable」、および「Table」を参照してください。
[イメージ]
img 要素を挿入します。この要素を編集して src と alt テキストを指定します。
デザイン ビュー領域に [Image] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<img alt="" src="">
詳細については、「HtmlImage サーバー コントロールの宣言構文」、「Image Web Server Control Overview」、「HtmlImage」、「HtmlInputImage」、および「Image」を参照してください。
[選択]
属性 size を含まないドロップダウンの select 要素を挿入します。既定では、最初のリスト ボックスに id="select1"、2 番目のリスト ボックスに id="select2" が挿入されます。
デザイン ビュー領域に [Select] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<select id="select1" name="select1"><option selected></option></select>
size プロパティの値を増やすと、複数行の select 要素を作成できます。
詳細については、「HtmlSelect サーバー コントロール宣言構文」、「How to: Create Scripts and Edit Event Handlers」、「DropDownList Web Server Control Overview」、「ListBox Web Server Control Overview」、「HtmlSelect」、および「DropDownList」を参照してください。
[Horizontal Rule]
hr 要素を挿入します。線の太さを変更するには、size 属性を編集します。
デザイン ビュー領域に [Horizontal Rule] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<hr width="100%" size=1>
詳細については、「HTML Horizontal Rule Control」を参照してください。
[DIV]
属性 ms_positioning="FlowLayout" を含む div 要素を挿入します。幅と高さを除けば、この項目はフロー レイアウト パネルと同じです。div 要素に含まれるテキストの書式を設定するには、開始タグに class="stylename" 属性を追加します。
デザイン ビュー領域に [DIV] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<div ms_positioning="FlowLayout" style="width: 70px; position: relative; height: 15px">Label</div>
詳細については、「HTML Div Control」、「Label Web Server Control Overview」、および「Label」を参照してください。