HTML Tab, Toolbox

The HTML tab of the Toolbox provides components useful on Web pages and Web forms. To view this tab, first open a document for editing in the HTML designer. Then choose Toolbox from the View menu, and select the HTML tab.

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. For more information, see Using the Toolbox and Managing Tabs and Items in the Toolbox.

Tools Available on the HTML Tab

The following tools are available by default on the HTML Tab. To jump to further information on any tool, click its name:

Pointer, Label, Button, Reset Button, Submit Button, Text Field,
Text Area, File Field, Password Field, Checkbox, Radio Button,
Hidden Field, Table, Flow Layout Panel, Grid Layout Panel, Image,
Listbox, Dropdown, Horizontal Rule, HTML Fragment, Text Fragment.

• 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 further information, see Using the Toolbox and Managing Tabs and Items in the Toolbox.

• 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 contained within the <DIV>, add a CLASS="stylename" attribute to the opening tag.

  

  When you drag and drop the Label icon 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 further information, see Creating DIV and SPAN Elements in Design View, DIV Element, div Object, Label Web Server Control, and System.Web.UI.WebControls.Label Class.

• Button
  Inserts an <INPUT> element of type="button". To change the text displayed, edit the name property. By default, id="Button1" for the first Button inserted, id="Button2" for the second, and so on.

  

  When you drag and drop the Button icon 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 further information, see INPUT type=button Element, input type=button Object, Event Handling in HTML Elements Sample, Button Web Server Controls, System.Web.UI.HtmlControls.HtmlInputButton Class, System.Web.UI.HtmlControls.HtmlButton Class, and System.Web.UI.WebControls.Button Class.

• Reset Button
  Inserts an <INPUT> element of type="reset". To change the text displayed, edit the name property. By default, id="Reset1" for the first Reset button inserted, id="Reset2" for the second, and so on.

  

  When you drag and drop the Reset Button icon 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 further information, see INPUT type=reset Element, input type=reset Object, System.Web.UI.HtmlControls.HtmlInputButton Class, and System.Web.UI.WebControls.Button Class.

• Submit Button
  Inserts an <INPUT> element of type="submit". To change the text displayed, edit the name property. By default, id="Submit1" for the first Submit button inserted, id="Submit2" for the second, and so on.

  

  When you drag and drop the Submit Button icon 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 further information, see INPUT type=submit Element, input type=submit Object, System.Web.UI.HtmlControls.HtmlInputButton Class, and System.Web.UI.WebControls.Button Class.

• Text Field
  Inserts an <INPUT> element of type="text" in your document. To change the default text displayed, edit the value attribute. By default, id="Text1" for the first Text field inserted, id="Text2" for the second, and so on.

  

  When you drag and drop the Text Field icon 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 further information, see INPUT type=text Element, input type=text Object, TextBox Web Server Control, System.Web.UI.HtmlControls.HtmlInputText Class, and System.Web.UI.WebControls.TextBox Class.

• 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 displayed, edit the value attribute. By default, id="TEXTAREA1" for the first Text Area inserted, id="TEXTAREA2" for the second, and so on.

  

  When you drag and drop the Text Area icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see TEXTAREA Element, textArea Object, System.Web.UI.HtmlControls.HtmlTextArea Class, and System.Web.UI.WebControls.TextBox Class.

• File Field
  Inserts an <INPUT> element of type="file" in your document. By default, id="File1" for the first File Field inserted, id="File2" for the second, and so on.

  

  When you drag and drop the File Field icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see INPUT type=file Element, input type=file Object, and System.Web.UI.HtmlControls.HtmlInputFile Class.

• Password Field
  Inserts an <INPUT> element of type="password". By default, id="Password1" for the first Password Field inserted, id="Password2" for the second, and so on.

  

  When you drag and drop the Password Field icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see INPUT type=password Element, input type=password Object, VALUE Attribute, value Property, Setting a TextBox Web Server Control for Password Entry, and Web Forms Validation.

• Checkbox
  Inserts an <INPUT> element of type="checkbox". To change the text displayed, edit the name property. By default, id="Checkbox1" for the first Checkbox inserted, id="Checkbox2" for the second, and so on.

  

  When you drag and drop the Checkbox icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see INPUT type=checkbox Element, input type=checkbox Object, CheckBox and CheckBoxList Web Server Controls, System.Web.UI.HtmlControls.HtmlInputCheckBox Class, and System.Web.UI.WebControls.CheckBox Class.

• Radio Button
  Inserts an <INPUT> element of type="radio". To change the text displayed, edit the name property. By default, id="Radio1" for the first Radio Button inserted, id="Radio2" for the second, and so on.

  

  When you drag and drop the Radio Button icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see INPUT type=radio Element, input type=radio Object, RadioButton and RadioButtonList Web Server Controls, System.Web.UI.HtmlControls.HtmlInputRadioButton Class, and System.Web.UI.WebControls.RadioButton Class.

• Hidden Field
  Inserts an <INPUT> element of type="hidden". By default, id="Hidden1" for the first Hidden Field inserted, id="Hidden2" for the second, and so on.

  

  When you drag and drop the Hidden Field icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see INPUT type=hidden Element, input type=hidden Object and System.Web.UI.HtmlControls.HtmlInputHidden Class.

• Table
  Inserts a <TABLE> element.

  

  When you drag and drop the Table icon 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 further information, see TABLE Element, table Object, Table, TableRow, and TableCell Web Server Controls, System.Web.UI.HtmlControls.HtmlTable Class, and System.Web.UI.WebControls.Table Class.

• Flow Layout Panel
  Inserts a <DIV> element that includes a preset ms_positioning="FlowLayout" attribute. This element is used to implement a 1D/2D editing model.

  

  When you set the pageLayout property of an HTML document or Web form to FlowLayout, and then drag and drop the Flow Layout Panel icon onto the Design view surface, HTML markup like the following is inserted into your document:

  <DIV style="WIDTH: 100px; HEIGHT: 100px" ms_positioning="FlowLayout"></DIV>
  

  For further information, see Positioning HTML Elements in Design View, Setting the pageLayout Property of an HTML Document, Creating DIV and SPAN Elements in Design View, DIV Element, div Object, Panel Web Server Control, and System.Web.UI.WebControls.Panel Class.

• Grid Layout Panel
  Inserts a <DIV> element that includes a preset ms_positioning="GridLayout" attribute. This element is used to implement a 1D/2D editing model.

  

  When you set the pageLayout property of an HTML document or Web form to GridLayout, and then drag and drop the Grid Layout Panel icon onto the Design view surface, HTML markup like the following is inserted into your document:

  <DIV style="Z-INDEX: 102; LEFT: 332px; WIDTH: 100px; POSITION: absolute; TOP: 123px; HEIGHT: 100px" ms_positioning="GridLayout"></DIV>
  

  For further information, see Positioning HTML Elements in Design View, Setting the pageLayout Property of an HTML Document, Creating DIV and SPAN Elements in Design View, DIV Element, div Object, Panel Web Server Control, System.Web.UI.WebControls.Panel Class, and Implementing IHTMLEditHost.

• Image
  Inserts an <img> element. Edit this element to specify its src and its alt text.

  

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

  <img alt="" src="">
  

  For further information, see IMAGE Element, image Object, INPUT type=image Element, input type=image Object, Image Web Server Control, System.Web.UI.HTMLControls.HtmlImage Class, System.Web.UI.HTMLControls.HtmlInputImage Class, and System.Web.UI.WebControls.Image Class.

• Listbox
  Inserts a multiline <select> element with size=2. To display a longer list, edit the size attribute. By default, id="SELECT1" for the first Listbox inserted, id="SELECT2" for the second, and so on.

  

  When you drag and drop the Listbox icon onto the Design view surface, HTML markup like the following is inserted into your document:

  <select id="SELECT1" size=2 name="SELECT1"><option>
  </option></select>
  

  For further information, see SELECT Element, select Object, Event Handling in HTML Elements Sample, ListBox Web Server Control, System.Web.UI.HtmlControls.HtmlSelect Class, and System.Web.UI.WebControls.ListBox Class.

• Dropdown
  Inserts a dropdown <select> element (without a size attribute). By default, id="SELECT1" for the first Listbox inserted, id="SELECT2" for the second, and so on.

  

  When you drag and drop the Dropdown icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see SELECT Element, select Object, Event Handling in HTML Elements Sample, DropDownList Web Server Control, System.Web.UI.HtmlControls.HtmlSelect Class, and System.Web.UI.WebControls.DropDownList Class.

• Horizontal Rule
  Inserts an <HR> element. To increase the thickness of the line edit the size attribute.

  

  When you drag and drop the Horizontal Rule icon onto the Design view surface, HTML markup like the following is inserted into your document:

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

  For further information, see HR Element, hr Object.

• HTML Fragment
  Inserts a scrap of HTML markup previously saved on the HTML tab.

  

  When you drag and drop the HTML Fragment icon onto the Design view surface, the HTML markup previously copied is inserted into your document:

  For further information, see Clipboard Ring Tab, Toolbox and Storing HTML Elements in the Toolbox.

• Text Fragment
  Inserts a scrap of text previously saved on the HTML tab.

  

  When you drag and drop the Text Fragment icon onto the Design view surface, the text previously copied is inserted into your document:

  For further information, see Clipboard Ring Tab, Toolbox and Storing HTML Elements in the Toolbox.

See Also

Toolbox | Options that Affect Existing HTML, CSS, or XML Markup | DHTML References | SPAN Object | SPAN Element | Building CSS Styles | Web Forms Tab, Toolbox | Controls You Can Use on Web Forms Pages | ASP.NET Server Controls by Function | System.Web.UI.HtmlControls Namespace | System.Web.UI.WebControls Namespace | How Policy Affects the Toolbox