ツールボックスの [HTML ] タブには、Web ページと Web フォームに役立つコンポーネントが用意されています。 このタブを表示するには、まず HTML デザイナーで編集用のドキュメントを開きます。 [ 表示 ] メニューの [ ツールボックス] をクリックし、[ツールボックス] の [HTML ] タブをクリックします。
[HTML] タブでツールのインスタンスを作成するには、ツールをダブルクリックして現在の挿入ポイントでドキュメントに追加するか、ツールを選択して編集画面の目的の位置にドラッグします。
UI 要素
次のツールは、[HTML] タブで既定で使用できます。
ポインター
このツールは、[ツールボックス] タブが開いたときに既定で選択されます。 削除できません。 ポインターを使用すると、オブジェクトをデザイン ビュー サーフェイスにドラッグし、サイズを変更し、ページまたはフォーム上で位置を変更できます。 詳細については、「ツールボックス」をご覧ください。
入力 (ボタン)
inputのtype="button"要素を挿入します。 表示されるテキストを変更するには、 name プロパティを編集します。 既定では、最初のボタンに id="Button1" が挿入され、2 番目のボタンに id="Button2" されます。
入力 (ボタン) をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Button1" type="button" value="Button" name="Button1">
入力 (リセット)
inputのtype="reset"要素を挿入します。 表示されるテキストを変更するには、 name プロパティを編集します。 既定では、最初のリセット ボタンに id="Reset1" が挿入され、2 番目のリセット ボタンに id="Reset2" されます。
入力 (リセット) をデザイン ビューサーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Reset1" type="reset" value="Reset" name="Reset1">
入力 (送信)
inputのtype="submit"要素を挿入します。 表示されるテキストを変更するには、 name プロパティを編集します。 既定では、最初の送信ボタンに id="Submit1" が挿入され、2 番目の送信ボタンに id="Submit2" されます。
デザイン ビューサーフェイスに Input (Submit) をドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Submit1" type="submit" value="Submit" name="Submit1">
入力 (テキスト)
inputのtype="text"要素を文書に挿入します。 表示される既定のテキストを変更するには、 value 属性を編集します。 既定では、最初のテキスト フィールドに id="Text1" が挿入され、2 番目のテキスト フィールドに id="Text2" されます。
入力 (テキスト) をデザイン ビューサーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Text1" TYPE="text" value="Text Field" name="Text1">
重要
すべてのユーザー入力を検証することをお勧めします。 詳細については、「 ASP.NET Web ページ (Razor) サイトでのユーザー入力の検証」を参照してください。
入力 (ファイル)
inputのtype="file"要素を文書に挿入します。 既定では、最初のファイル フィールドに id="File1" が挿入され、2 番目のフィールドに id="File2" されます。
入力 (ファイル) をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="File1" type="file" name="File1">
重要
すべてのユーザー入力を検証することをお勧めします。 詳細については、「 ASP.NET Web ページ (Razor) サイトでのユーザー入力の検証」を参照してください。
入力 (パスワード)
inputのtype="password"要素を挿入します。 既定では、最初のパスワード フィールドに id="Password1" が挿入され、2 番目のパスワード フィールドに id="Password2" されます。
入力 (パスワード) をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Password1" type="password" name="Password1">
重要
アプリケーションがユーザー名とパスワードを送信する場合は、Ssl (Secure Sockets Layer) を使用して送信を暗号化するように Web サイトを構成する必要があります。 詳細については、「接続の セキュリティ保護」を参照してください。 さらに、すべてのユーザー入力を検証することをお勧めします。 詳細については、「 ASP.NET Web ページ (Razor) サイトでのユーザー入力の検証」を参照してください。
入力 (チェック ボックス)
inputのtype="checkbox"要素を挿入します。 表示されるテキストを変更するには、 name プロパティを編集します。 既定では、最初のチェック ボックスに id="Checkbox1" が挿入され、2 番目のチェック ボックスに id="Checkbox2" されます。
入力 (チェック ボックス) をデザイン ビューサーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Checkbox1" type="checkbox" name="Checkbox1">
入力 (無線)
inputのtype="radio"要素を挿入します。 表示されるテキストを変更するには、 name プロパティを編集します。 既定では、最初のラジオ ボタンに id="Radio1" が挿入され、2 番目のラジオ ボタンに id="Radio2" されます。
Input (Radio) をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Radio1" type="radio" name="Radio1">
入力 (非表示)
inputのtype="hidden"要素を挿入します。 既定では、最初の非表示フィールドに id="Hidden1" が挿入され、2 番目のフィールドに id="Hidden2" されます。
入力 (非表示) をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<input id="Hidden1" type="hidden" name="Hidden1">
テキストエリア
textarea要素を挿入します。 テキスト領域のサイズを変更したり、スクロール バーを使用して、表示領域を超えて拡張されたテキストを表示したりできます。 表示される既定のテキストを変更するには、 value 属性を編集します。 既定では、 id="textarea1" は最初のテキスト領域を挿入し、2 番目のテキスト領域に id=" textarea 2" します。
Textarea をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<textarea id=" textarea 1 name=" textarea 1" rows=2 cols=20></textarea>
重要
すべてのユーザー入力を検証することをお勧めします。 詳細については、「 ASP.NET Web ページ (Razor) サイトでのユーザー入力の検証」を参照してください。
テーブル
table要素を挿入します。
Table をデザイン ビュー画面にドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>
イメージ
img要素を挿入します。 この要素を編集して、 src とその alt テキストを指定します。
イメージをデザイン ビュー 画面にドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<img alt="" src="">
の選択
ドロップダウン select 要素を挿入します ( size 属性は使用しません)。 既定では、最初のリスト ボックスに id="select1" が挿入され、2 番目のリスト ボックスに id="select2" されます。
Select をデザイン ビュー画面にドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<select id="select1" name="select1"><option selected></option></select>
size プロパティの値を大きくすることで、複数行の select 要素を作成できます。
水平ルール
hr要素を挿入します。 線の太さを増やすには、 size 属性を編集します。
水平ルールをデザイン ビュー画面にドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<hr width="100%" size=1>
ディビジョン
div属性を含むms_positioning="FlowLayout"要素を挿入します。 幅と高さを除き、この項目はフロー レイアウト パネルと同じです。
div要素に含まれるテキストの書式を設定するには、開始タグにclass="stylename"属性を追加します。
Div をデザイン ビュー サーフェイスにドラッグすると、次のような HTML マークアップがドキュメントに挿入されます。
<div ms_positioning="FlowLayout" style="width: 70px; position: relative; height: 15px">Label</div>