Toolbox, HTML Tab

Note

This article applies to Visual Studio 2015. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

The HTML tab of the Toolbox provides components that are useful on Web pages and Web forms. To view this tab, first open a document for editing in the HTML designer. On the View menu, click Toolbox, and then click the HTML tab of the Toolbox.

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 Elements

The following tools are available by default on the HTML tab.

Pointer 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 How to: Manage the Toolbox Window and How to: Manipulate Toolbox Tabs.

Input (Button) HTML web page button

Inserts an input element of type="button". To change the text that is displayed, edit the name property. By default, id="Button1" is inserted for the first button, id="Button2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputButton Server Control Declarative Syntax, NIB: How to: Create Scripts and Edit Event Handlers, Button Web Server Controls Content Map, HtmlInputButton, HtmlButton, and Button.

Input (Reset) HTMLpageResetButton screenshot

Inserts an input element of type="reset". To change the text that is displayed, edit the name property. By default, id="Reset1" is inserted for the first reset button, id="Reset2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputReset Server Control Declarative Syntax, HtmlInputButton, and Button.

Input (Submit) HTMLpageToolbarSubmitButton screenshot

Inserts an input element of type="submit". To change the text that is displayed, edit the name property. By default, id="Submit1" is inserted for the first submit button, id="Submit2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputSubmit Server Control Declarative Syntax, HtmlInputButton, and Button.

Input (Text) HTMLpageToolbarTextField screenshot

Inserts an input element of type="text" in your document. To change the default text that is displayed, edit the value attribute. By default, id="Text1" is inserted for the first text field, id="Text2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputText Server Control Declarative Syntax, TextBox Web Server Control Overview, HtmlInputText, and TextBox.

Important

It is recommended that you validate all user input. For more information, see Validating User Input in ASP.NET Web Pages.

Input (File) HTML page File Field

Inserts an input element of type="file" in your document. By default, id="File1" is inserted for the first file field, id="File2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputFile Server Control Declarative Syntax, and HtmlInputFile.

Important

It is recommended that you validate all user input. For more information, see Validating User Input in ASP.NET Web Pages.

Input (Password) Visual Studio Password Field

Inserts an input element of type="password". By default, id="Password1" is inserted for the first password field, id="Password2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputPassword Server Control Declarative Syntax, How to: Set a TextBox Web Server Control for Password Entry, and Walkthrough: Validating User Input in a Web Forms Page.

Important

If your application transmits user names and passwords, you should configure your Web site to use Secure Sockets Layer (SSL) to encrypt the transmission. For more information, see "Securing Connections with SSL" in the IIS Operations Guide. Additionally, it is recommended that you validate all user input. For more information, see Validating User Input in ASP.NET Web Pages.

Input (Check box) HTML webpage Toolbox Checkbox Option

Inserts an input element of type="checkbox". To change the text that is displayed, edit the name property. By default, id="Checkbox1" is inserted for the first check box, id="Checkbox2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputCheckBox Server Control Declarative Syntax, CheckBox and CheckBoxList Web Server Controls Overview, HtmlInputCheckBox, and CheckBox.

Input (Radio) VisualStudioHTMLpageRadioButton screenshot

Inserts an input element of type="radio". To change the text that is displayed, edit the name property. By default, id="Radio1" is inserted for the first radio button, id="Radio2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputRadioButton Server Control Declarative Syntax, RadioButton and RadioButtonList Web Server Controls Overview, HtmlInputRadioButton, and RadioButton.

Input (Hidden) HTML page Hidden Item

Inserts an input element of type="hidden". By default, id="Hidden1" is inserted for the first hidden field, id="Hidden2" for the second, and so on.

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">

For more information, see HTML Input Controls, HtmlInputHidden Server Control Declarative Syntax, and HtmlInputHidden.

Textarea HTMLpage Toolbar Text Area

Inserts a textarea element. You can resize the text area, or use its scroll bars to view text that extends beyond its display area. To change the default text that is displayed, edit the value attribute. By default, id="textarea1" is inserted the first text area, id=" textarea 2" for the second, and so on.

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>

For more information, see HtmlTextArea Server Control Declarative Syntax, HtmlTextArea, and TextBox.

Important

It is recommended that you validate all user input. For more information, see Validating User Input in ASP.NET Web Pages.

Table HTMLpageToolbarTable screenshot

Inserts a table element.

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>

For more information, see HtmlTable Server Control Declarative Syntax, Table, TableRow, and TableCell Web Server Control Overview, HtmlTable, and Table.

Image HTML page Image Item

Inserts an img element. Edit this element to specify its src and its alt text.

When you drag Image onto the Design view surface, HTML markup like the following is inserted into your document:

<img alt="" src="">

For more information, see HtmlImage Server Control Declarative Syntax, Image Web Server Control Overview, HtmlImage, HtmlInputImage, and Image.

Select HTML page Toolbox Dropdown

Inserts a dropdown select element (without a size attribute). By default, id="select1" is inserted for the first list box, id="select2" for the second, and so on.

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>

You can create a multi-line select element by increasing the value of the size property.

For more information, see HtmlSelect Server Control Declarative Syntax, NIB: How to: Create Scripts and Edit Event Handlers, DropDownList Web Server Control Overview, ListBox Web Server Control Overview, HtmlSelect, and DropDownList.

Horizontal Rule HTML page Horizontal Rule Item

Inserts an hr element. To increase the thickness of the line, edit the size attribute.

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>

For more information, see HTML Horizontal Rule Control.

Div HTML page Label

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. To format the text that is contained within the div element, add a class="stylename" attribute to the opening tag.

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>

For more information, see HTML Div Control, Label Web Server Control Overview, and Label.

See Also

Toolbox Standard Tab, Toolbox HTML Controls