タブ (ツールボックス)
ツールボックスの [HTML] タブには、Web ページや Web フォームで利用できるコンポーネントが用意されています。 このタブを表示するには、まず編集するドキュメントを HTML デザイナーで開きます。 [表示] メニューの [ツールボックス] をクリックし、次にツールボックスの [HTML] タブをクリックします。
[HTML] タブのツールのインスタンスを作成するには、ツールをダブルクリックして現在のカーソルの場所でドキュメントに追加するか、またはツールを選択して編集領域上の目的の位置にドラッグします。
タスク
UI 要素
[HTML] タブで既定で利用できるツールを次に示します。
Pointer
このツールは、ツールボックスの任意のタブが開いているときに既定で選択されています。 削除することはできません。 ポインターを使って、オブジェクトをデザイン ビュー領域にドラッグしたり、オブジェクトのサイズを変更したり、ページやフォーム上でオブジェクトを配置し直したりできます。 詳細については、「方法 : [ツールボックス] ウィンドウを管理する」および「[ツールボックス] タブの操作方法」を参照してください。
[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 コントロール」、「HtmlInputButton サーバー コントロール宣言構文」、「方法 : スクリプトを作成し、イベント ハンドラーを編集する」、「ボタン Web サーバー コントロールのコンテンツ マップ」、「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 コントロール」、「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 コントロール」、「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 コントロール」、「HtmlInputText サーバー コントロール宣言構文」、「TextBox Web サーバー コントロールの概要」、「HtmlInputText」、および「TextBox」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。 詳細については、「ASP.NET Web ページにおけるユーザー入力の検証」を参照してください。
[Input (File)]
ドキュメントに type="file" の input 要素を挿入します。 既定では、最初のファイル フィールドに id="File1"、2 番目のファイル フィールドに id="File2" が挿入されます。
デザイン ビュー領域に [Input (File)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="File1" type="file" name="File1">
詳細については、「HTML Input コントロール」、「HtmlInputFile サーバー コントロール宣言構文」、および「HtmlInputFile」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。 詳細については、「ASP.NET Web ページにおけるユーザー入力の検証」を参照してください。
[Input (Password)]
type="password" の input 要素を挿入します。 既定では、最初のパスワード フィールドに id="Password1"、2 番目のパスワード フィールドに id="Password2" が挿入されます。
デザイン ビュー領域に [Input (Password)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Password1" type="password" name="Password1">
詳細については、「HTML Input コントロール」、「HtmlInputPassword サーバー コントロールの宣言構文」、「方法 : パスワード入力のための TextBox Web サーバー コントロールを設定する」、および「チュートリアル : Web フォーム ページにおけるユーザーの入力の検証」を参照してください。
セキュリティに関するメモ アプリケーションがユーザー名とパスワードを伝送する場合、SSL (Secure Socket Layer) を使用して伝送を暗号化するように Web サイトを設定します。 詳細については、IIS Operations Guide の「Securing Connections with SSL」を参照してください。 また、すべてのユーザー入力を検証することをお勧めします。 詳細については、「ASP.NET Web ページにおけるユーザー入力の検証」を参照してください。
[Input (Checkbox)]
type="checkbox" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、最初のチェック ボックスに id="Checkbox1"、2 番目のチェック ボックスに id="Checkbox2" が挿入されます。
デザイン ビュー領域に [Input (Checkbox)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Checkbox1" type="checkbox" name="Checkbox1">
詳細については、「HTML Input コントロール」、「HtmlInputCheckBox サーバー コントロールの宣言構文」、「CheckBox Web サーバー コントロールおよび CheckBoxList Web サーバー コントロールの概要」、「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 コントロール」、「HtmlInputRadioButton サーバー コントロール宣言構文」、「RadioButton Web サーバー コントロールおよび RadioButtonList Web サーバー コントロールの概要」、「HtmlInputRadioButton」、および「RadioButton」を参照してください。
[Input (Hidden)]
type="hidden" の input 要素を挿入します。 既定では、最初の隠しフィールドに id="Hidden1"、2 番目の隠しフィールドに id="Hidden2" が挿入されます。
デザイン ビュー領域に [Input (Hidden)] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Hidden1" type="hidden" name="Hidden1">
詳細については、「HTML Input コントロール」、「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」を参照してください。
セキュリティに関するメモ すべてのユーザー入力を検証することをお勧めします。 詳細については、「ASP.NET Web ページにおけるユーザー入力の検証」を参照してください。
テーブル
table 要素を挿入します。
デザイン ビュー領域に [Table] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>
詳細については、「HtmlTable サーバー コントロールの宣言構文」、「Table、TableRow、TableCell の各 Web サーバー コントロールの概要」、「HtmlTable」、および「Table」を参照してください。
[Image]
img 要素を挿入します。 この要素を編集して src と alt テキストを指定します。
デザイン ビュー領域に [Image] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<img alt="" src="">
詳細については、「HtmlImage サーバー コントロールの宣言構文」、「Image Web サーバー コントロールの概要」、「HtmlImage」、「HtmlInputImage」、および「Image」を参照してください。
[Select]
属性 size を含まないドロップダウンの select 要素を挿入します。 既定では、最初のリスト ボックスに id="select1"、2 番目のリスト ボックスに id="select2" が挿入されます。
デザイン ビュー領域に [Select] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<select id="select1" name="select1"><option selected></option></select>
size プロパティの値を増やすと、複数行の select 要素を作成できます。
詳細については、「HtmlSelect サーバー コントロール宣言構文」、「方法 : スクリプトを作成し、イベント ハンドラーを編集する」、「DropDownList Web サーバー コントロールの概要」、「ListBox Web サーバー コントロールの概要」、「HtmlSelect」、および「DropDownList」を参照してください。
[Horizontal Rule]
hr 要素を挿入します。 線の太さを変更するには、size 属性を編集します。
デザイン ビュー領域に [Horizontal Rule] をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<hr width="100%" size=1>
詳細については、「HTML Horizontal Rule コントロール」を参照してください。
[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 コントロール」、「Label Web サーバー コントロールの概要」、および「Label」を参照してください。