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

ツールボックスの [HTML] タブは、Web ページと Web フォームで使用するコンポーネントを提供します。The HTML tab of the Toolbox provides components that are useful on Web pages and Web forms. このタブを表示するには、まず、HTML デザイナーで編集するためのドキュメントを開きます。To view this tab, first open a document for editing in the HTML designer. [表示] メニューで [ツールボックス] をクリックし、ツールボックスの [HTML] タブをクリックします。On the View menu, click Toolbox, and then click the HTML tab of the Toolbox.

[HTML] タブでツールのインスタンスを作成するには、ドキュメントに追加するツールをダブルクリックするか、またはツールを選択して編集サーフェイスの目的の位置にドラッグします。To create an instance of a tool on the HTML tab, either double-click the tool to add it to your document at the current insertion point, or select the tool and drag it to the desired position on the editing surface.

タスクTasks

UI 要素UI Elements

次のツールは、[HTML] タブで既定で使用できます。The following tools are available by default on the HTML tab.

ポインターPointer
ASP.NET モバイル デザイナー HTMLpage ポインターASP.NET Mobile Designer HTMLpage Pointer

このツールは、任意の [ツールボックス] タブを開いたときに、既定で選択されます。This tool is selected by default when any Toolbox tab opens. 削除することはできません。It cannot be deleted. マウス ポインターを使用すると、オブジェクトをデザイン ビュー サーフェイスにドラッグしたり、サイズ変更したり、ページまたはフォーム上で位置を変更することができます。The pointer enables you to drag objects onto the Design view surface, resize them, and reposition them on the page or form. 詳細については、「ツールボックスの使用」を参照してください。For more information, see Using the Toolbox.

入力 (ボタン)Input (Button)
HTML Web ページ ボタンHTML web page button

type="button"input 要素を挿入します。Inserts an input element of type="button". 表示されるテキストを変更するには、name プロパティを編集します。To change the text that is displayed, edit the name property. 既定では、id="Button1" は最初のボタンに挿入され、id="Button2" は 2 番目のボタンという具合に挿入されます。By default, id="Button1" is inserted for the first button, id="Button2" for the second, and so on.

入力 (ボタン) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Button) onto the Design view surface, HTML markup like the following is inserted into your document:

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

入力 (リセット)Input (Reset)
HTMLpageResetButton スクリーンショットHTMLpageResetButton screenshot

type="reset"input 要素を挿入します。Inserts an input element of type="reset". 表示されるテキストを変更するには、name プロパティを編集します。To change the text that is displayed, edit the name property. 既定では、id="Reset1" は最初のリセット ボタンに挿入され、id="Reset2" は 2 番目のリセット ボタンという具合に挿入されます。By default, id="Reset1" is inserted for the first reset button, id="Reset2" for the second, and so on.

入力 (リセット) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Reset) onto the Design view surface, HTML markup like the following is inserted into your document:

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

入力 (送信)Input (Submit)
HTMLpageToolbarSubmitButton スクリーンショットHTMLpageToolbarSubmitButton screenshot

type="submit"input 要素を挿入します。Inserts an input element of type="submit". 表示されるテキストを変更するには、name プロパティを編集します。To change the text that is displayed, edit the name property. 既定では、id="Submit1" は最初の送信ボタンに挿入され、id="Submit2" は 2 番目の送信ボタンという具合に挿入されます。By default, id="Submit1" is inserted for the first submit button, id="Submit2" for the second, and so on.

入力 (送信) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Submit) onto the Design view surface, HTML markup like the following is inserted into your document:

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

入力 (テキスト)Input (Text)
HTMLpageToolbarTextField スクリーンショットHTMLpageToolbarTextField screenshot

ドキュメントに type="text"input 要素を挿入します。Inserts an input element of type="text" in your document. 表示される既定のテキストを変更するには、value 属性を編集します。To change the default text that is displayed, edit the value attribute. 既定では、id="Text1" は最初のテキスト フィールドに挿入され、id="Text2" は 2 番目のテキスト フィールドという具合に挿入されます。By default, id="Text1" is inserted for the first text field, id="Text2" for the second, and so on.

入力 (テキスト) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Text) onto the Design view surface, HTML markup like the following is inserted into your document:

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

重要

すべてのユーザー入力を検証することをお勧めします。It is recommended that you validate all user input. 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

入力 (ファイル)Input (File)
HTML ページ ファイル フィールドHTML page File Field

ドキュメントに type="file"input 要素を挿入します。Inserts an input element of type="file" in your document. 既定では、id="File1" は最初のファイル フィールドに挿入され、id="File2" は 2 番目のファイル フィールドという具合に挿入されます。By default, id="File1" is inserted for the first file field, id="File2" for the second, and so on.

入力 (ファイル) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (File) onto the Design view surface, HTML markup like the following is inserted into your document:

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

重要

すべてのユーザー入力を検証することをお勧めします。It is recommended that you validate all user input. 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

入力 (パスワード)Input (Password)
Visual Studio パスワード フィールドVisual Studio Password Field

type="password"input 要素を挿入します。Inserts an input element of type="password". 既定では、id="Password1" は最初のパスワード フィールドに挿入され、id="Password2" は 2 番目のパスワード フィールドという具合に挿入されます。By default, id="Password1" is inserted for the first password field, id="Password2" for the second, and so on.

入力 (パスワード) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Password) onto the Design view surface, HTML markup like the following is inserted into your document:

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

重要

アプリケーションでユーザー名とパスワードを送信する場合、転送を暗号化するため、Secure Sockets Layer (SSL) を使用するように Web サイトを構成する必要があります。If your application transmits user names and passwords, you should configure your Web site to use Secure Sockets Layer (SSL) to encrypt the transmission. 詳細については、「IIS Operations Guide」 (IIS 操作ガイド) の「Securing Connections with SSL」 (SSL で接続を保護する) を参照してください。For more information, see "Securing Connections with SSL" in the IIS Operations Guide. また、すべてのユーザー入力を検証することをお勧めします。Additionally, it is recommended that you validate all user input. 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

入力 (チェック ボックス)Input (Check box)
HTML Web ページ ツールボックス チェック ボックス オプションHTML webpage Toolbox Checkbox Option

type="checkbox"input 要素を挿入します。Inserts an input element of type="checkbox". 表示されるテキストを変更するには、name プロパティを編集します。To change the text that is displayed, edit the name property. 既定では、id="Checkbox1" は最初のチェック ボックスに挿入され、id="Checkbox2" は 2 番目のチェック ボックスという具合に挿入されます。By default, id="Checkbox1" is inserted for the first check box, id="Checkbox2" for the second, and so on.

入力 (チェック ボックス) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Check box) onto the Design view surface, HTML markup like the following is inserted into your document:

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

入力 (ラジオ)Input (Radio)
VisualStudioHTMLpageRadioButton スクリーンショットVisualStudioHTMLpageRadioButton screenshot

type="radio"input 要素を挿入します。Inserts an input element of type="radio". 表示されるテキストを変更するには、name プロパティを編集します。To change the text that is displayed, edit the name property. 既定では、id="Radio1" は最初のラジオ ボタンに挿入され、id="Radio2" は 2 番目のラジオ ボタンという具合に挿入されます。By default, id="Radio1" is inserted for the first radio button, id="Radio2" for the second, and so on.

入力 (ラジオ) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Radio) onto the Design view surface, HTML markup like the following is inserted into your document:

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

入力 (非表示)Input (Hidden)
HTML ページ非表示項目HTML page Hidden Item

type="hidden"input 要素を挿入します。Inserts an input element of type="hidden". 既定では、id="Hidden1" は最初の非表示フィールドに挿入され、id="Hidden2" は 2 番目の非表示フィールドという具合に挿入されます。By default, id="Hidden1" is inserted for the first hidden field, id="Hidden2" for the second, and so on.

入力 (非表示) をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Input (Hidden) onto the Design view surface, HTML markup like the following is inserted into your document:

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

テキスト領域Textarea
HTMLpage ツール バー テキスト領域HTMLpage Toolbar Text Area

textarea 要素を挿入します。Inserts a textarea element. テキスト領域のサイズを変更するか、スクロール バーを使用して表示領域を超える長さのテキストを表示することができます。You can resize the text area, or use its scroll bars to view text that extends beyond its display area. 表示される既定のテキストを変更するには、value 属性を編集します。To change the default text that is displayed, edit the value attribute. 既定では、id="textarea1" は最初のテキスト領域に挿入され、id=" textarea 2" は 2 番目のテキスト領域という具合に挿入されます。By default, id="textarea1" is inserted the first text area, id=" textarea 2" for the second, and so on.

テキスト領域をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Textarea onto the Design view surface, HTML markup like the following is inserted into your document:

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

重要

すべてのユーザー入力を検証することをお勧めします。It is recommended that you validate all user input. 詳細については、「Validating User Input in ASP.NET Web Pages (Razor) Sites」(ASP.NET Web ページ (Razor) サイトにおけるユーザー入力の検証) を参照してください。For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

テーブルTable
HTMLpageToolbarTable スクリーンショットHTMLpageToolbarTable screenshot

table 要素を挿入します。Inserts a table element.

テーブルをデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Table onto the Design view surface, HTML markup like the following is inserted into your document:

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

イメージImage
HTML ページ イメージ項目HTML page Image Item

img 要素を挿入します。Inserts an img element. この要素を編集して、要素の srcalt テキストを指定します。Edit this element to specify its src and its alt text.

イメージをデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Image onto the Design view surface, HTML markup like the following is inserted into your document:

<img alt="" src="">  

選択Select
HTML ページ ツールボックス ドロップダウンHTML page Toolbox Dropdown

select 要素のドロップダウン リスト (size 属性なし) を挿入します。Inserts a dropdown select element (without a size attribute). 既定では、id="select1" は最初のリスト ボックスに挿入され、id="select2" は 2 番目のリスト ボックスという具合に挿入されます。By default, id="select1" is inserted for the first list box, id="select2" for the second, and so on.

選択をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Select onto the Design view surface, HTML markup like the following is inserted into your document:

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

サイズ プロパティの値を増やすことで、複数行の select 要素を作成できます。You can create a multi-line select element by increasing the value of the size property.

水平線Horizontal Rule
HTML ページの水平線項目HTML page Horizontal Rule Item

hr 要素を挿入します。Inserts an hr element. 線の太さを太くするには、size 属性を編集します。To increase the thickness of the line, edit the size attribute.

水平線をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Horizontal Rule onto the Design view surface, HTML markup like the following is inserted into your document:

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

DivDiv
HTML ページ ラベルHTML page Label

ms_positioning="FlowLayout" 属性を含む div 要素を挿入します。Inserts a div element that includes an ms_positioning="FlowLayout" attribute. 幅と高さを除き、この項目はフロー レイアウト パネルと同じです。Except for the width and height, this item is identical to a Flow Layout Panel. div 要素内に含まれるテキストを書式設定するには、class="stylename" 属性を開始タグに追加します。To format the text that is contained within the div element, add a class="stylename" attribute to the opening tag.

Div をデザイン ビュー サーフェイスにドラッグすると、次のように HTML マークアップがドキュメントに挿入されます。When you drag Div onto the Design view surface, HTML markup like the following is inserted into your document:

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

関連項目See Also

ツールボックス Toolbox
ツールボックスの使用Using the Toolbox