ツールボックス、[HTML] タブ

ツールボックスの [HTML] タブは、Web ページと Web フォームで使用するコンポーネントを提供します。 このタブを表示するには、まず、HTML デザイナーで編集するためのドキュメントを開きます。 [表示] メニューで [ツールボックス] をクリックし、ツールボックスの [HTML] タブをクリックします。

[HTML] タブでツールのインスタンスを作成するには、ドキュメントに追加するツールをダブルクリックするか、またはツールを選択して編集サーフェイスの目的の位置にドラッグします。

UI 要素

次のツールは、[HTML] タブで既定で使用できます。

ポインター

このツールは、任意の [ツールボックス] タブを開いたときに、既定で選択されます。 これを削除することはできません。 マウス ポインターを使用すると、オブジェクトをデザイン ビュー サーフェイスにドラッグしたり、サイズ変更したり、ページまたはフォーム上で位置を変更することができます。 詳細については、「ツールボックス」をご覧ください。

入力 (ボタン)

type="button" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、id="Button1" は最初のボタンに挿入され、id="Button2" は 2 番目のボタンという具合に挿入されます。

入力 (ボタン) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Button1" type="button" value="Button" name="Button1">

入力 (リセット)

type="reset" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、id="Reset1" は最初のリセット ボタンに挿入され、id="Reset2" は 2 番目のリセット ボタンという具合に挿入されます。

入力 (リセット) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Reset1" type="reset" value="Reset" name="Reset1">

入力 (送信)

type="submit" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、id="Submit1" は最初の送信ボタンに挿入され、id="Submit2" は 2 番目の送信ボタンという具合に挿入されます。

入力 (送信) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Submit1" type="submit" value="Submit" name="Submit1">

入力 (テキスト)

ドキュメントに type="text" の input 要素を挿入します。 表示される既定のテキストを変更するには、value 属性を編集します。 既定では、id="Text1" は最初のテキスト フィールドに挿入され、id="Text2" は 2 番目のテキスト フィールドという具合に挿入されます。

入力 (テキスト) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Text1" TYPE="text" value="Text Field" name="Text1">

重要

すべてのユーザー入力を検証することをお勧めします。 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。

入力 (ファイル)

ドキュメントに type="file" の input 要素を挿入します。 既定では、id="File1" は最初のファイル フィールドに挿入され、id="File2" は 2 番目のファイル フィールドという具合に挿入されます。

入力 (ファイル) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="File1" type="file" name="File1">

重要

すべてのユーザー入力を検証することをお勧めします。 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。

入力 (パスワード)

type="password" の input 要素を挿入します。 既定では、id="Password1" は最初のパスワード フィールドに挿入され、id="Password2" は 2 番目のパスワード フィールドという具合に挿入されます。

入力 (パスワード) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Password1" type="password" name="Password1">

重要

アプリケーションでユーザー名とパスワードを送信する場合、転送を暗号化するため、Secure Sockets Layer (SSL) を使用するように Web サイトを構成する必要があります。 詳細については、「Securing Connections」 (接続をセキュリティで保護する) を参照してください。 また、すべてのユーザー入力を検証することをお勧めします。 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。

入力 (チェック ボックス)

type="checkbox" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、id="Checkbox1" は最初のチェック ボックスに挿入され、id="Checkbox2" は 2 番目のチェック ボックスという具合に挿入されます。

入力 (チェック ボックス) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Checkbox1" type="checkbox" name="Checkbox1">

入力 (ラジオ)

type="radio" の input 要素を挿入します。 表示されるテキストを変更するには、name プロパティを編集します。 既定では、id="Radio1" は最初のラジオ ボタンに挿入され、id="Radio2" は 2 番目のラジオ ボタンという具合に挿入されます。

入力 (ラジオ) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Radio1" type="radio" name="Radio1">

入力 (非表示)

type="hidden" の input 要素を挿入します。 既定では、id="Hidden1" は最初の非表示フィールドに挿入され、id="Hidden2" は 2 番目の非表示フィールドという具合に挿入されます。

入力 (非表示) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<input id="Hidden1" type="hidden" name="Hidden1">

テキスト領域

textarea 要素を挿入します。 テキスト領域のサイズを変更するか、スクロール バーを使用して表示領域を超える長さのテキストを表示することができます。 表示される既定のテキストを変更するには、value 属性を編集します。 既定では、id="textarea1" は最初のテキスト領域に挿入され、id=" textarea 2" は 2 番目のテキスト領域という具合に挿入されます。

テキスト領域をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<textarea id=" textarea 1 name=" textarea 1" rows=2 cols=20></textarea>

重要

すべてのユーザー入力を検証することをお勧めします。 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。

テーブル

table 要素を挿入します。

テーブルをデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>

イメージ

img 要素を挿入します。 この要素を編集して、要素の src と alt テキストを指定します。

イメージをデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<img alt="" src="">

Select

select 要素のドロップダウン リスト (size 属性なし) を挿入します。 既定では、id="select1" は最初のリスト ボックスに挿入され、id="select2" は 2 番目のリスト ボックスという具合に挿入されます。

選択をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<select id="select1" name="select1"><option selected></option></select>

サイズ プロパティの値を増やすことで、複数行の select 要素を作成できます。

水平線

hr 要素を挿入します。 線の太さを太くするには、size 属性を編集します。

水平線をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<hr width="100%" size=1>

Div

ms_positioning="FlowLayout" 属性を含む div 要素を挿入します。 幅と高さを除き、この項目はフロー レイアウト パネルと同じです。 div 要素内に含まれるテキストを書式設定するには、class="stylename" 属性を開始タグに追加します。

Div をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。

<div ms_positioning="FlowLayout" style="width: 70px; position: relative; height: 15px">Label</div>

関連項目

• ツールボックス