The HtmlContainerControl Class

The HtmlContainerControl class defines the methods, properties, and events available to all HTML server controls that can act as a container (in HTML terms, these elements all require a closing tag). This class is the base class for the HtmlTableCell, HtmlTable, HtmlTableRow, HtmlButton, HtmlForm, HtmlAnchor, HtmlGenericControl, HtmlSelect, and HtmlTextArea classes, all of which share these properties:

• InnerHtml— Gets/sets the content between the opening and closing tags of the HTML control.

• InnerText— Gets/sets all text between the opening and closing tags of the specified HTML control. (Note that unlike the InnerHtml property, InnerText supports automatic HTML encoding and decoding.)

The HtmlInputControl Class

The HtmlInputControl class serves as the abstract base class that defines the methods, properties, and events common to all HTML input controls, such as the <input type="text">, <input type="submit">, and other elements that the user can enter data into. The classes derived from the HtmlInputControl class are the HtmlInputText, HtmlInputButton, HtmlInputCheckBox, HtmlInputImage, HtmlInputHidden, HtmlInputFile, and HtmlInputRadioButton classes, all of which share the following properties:

• Name— Gets/sets a unique name for the input control.

• Value— Gets/sets the contents of an input control.

• Type— Gets the type of an input control.

The HtmlForm Class

You use the HtmlForm class if you want to create an HTML form. You don't need to create a form yourself to work with the HTML controls, because as soon as you add an input control to a form, Visual Basic creates a form for you. However, you can create additional forms using this class if you want to; all server controls that post back to the server must be placed between the opening and closing tags of an HTML form.

The HtmlInputText Class

You use the HtmlInputText class to support HTML text fields. You also can use this class to create password fields. Text fields are single-line text boxes that allow the user to enter text or a password. Use the MaxLength property to specify the maximum number of characters that can be entered in the text box. The Size property allows you to specify the width of the text box. You can see a text field in the HTMLControls example on the CD-ROM and in Figure 19.1.

To use a multiline text box, use the HtmlTextArea class instead, coming up next.

The HtmlTextArea Class

You use the HtmlTextArea control to create an HTML text area (a two-dimensional text field). This is the control you use to accept multiline input in a Web page. You can see a text area in the HTMLControls example on the CD-ROM, as shown in Figure 19.1.

The HtmlAnchor Class

You use the HtmlAnchor class to creates an anchor, <a>, element for navigation. There are two ways to use the HtmlAnchor class—the first is for navigation: using the HRef property to define the location of the page to link to. The second is for postback events: using the ServerClick event to programmatically handle the case when the user clicks a link.

The HtmlButton Class

The HtmlButton class creates an HTML button using the HTML <button> element, which displays buttons that also can display images. Note that the <button> element is defined in the HTML 4.0 specification and is supported only in relatively recent browsers. To create image buttons for use in other browsers, you can use the HtmlInputImage class.

The HtmlInputButton Class

The HtmlInputButton class creates an HTML button using an HTML <input> element. This control is similar to <button> elements, except it's available in all browsers. You can set the caption of an input button with its value property and can handle clicks with code on the server using the ServerClick event.

The HtmlInputImage Class

The HtmlInputImage class creates an HTML button that displays images. You can handle clicks on the image by providing an event handler for the ServerClick event.

The coordinates that indicate where the user clicked an input image control can be found by using the ImageClickEventArgs.X and ImageClickEventArgs.Y properties of the ImageClickEventArgs object that is passed as a parameter to the control's event handler.

The HtmlSelect Class

The HtmlSelect class creates an HTML select control, which can display as either a list box (use the ListBox tool in the toolbox) or a drop-down list box (use the DropDown tool in the toolbox).

You can see a list box in the HTMLControls example in Figure 19.1. The items in a select control are stored in <option> elements inside the <select> element; when you add a list box or drop-down list box to a Web form using HTML server controls, Visual Basic adds a default, empty <option> element to the <select> element:

<SELECT style="Z-INDEX: 111; LEFT: 301px; WIDTH: 114px; POSITION: absolute;
TOP: 136px; HEIGHT: 38px" size=2>
<OPTION></OPTION>
</SELECT>

To add the items you want to display, you can edit the HTML directly:

<SELECT style="Z-INDEX: 111; LEFT: 301px; WIDTH: 114px; POSITION: absolute;
TOP: 136px; HEIGHT: 38px" size=2>
<OPTION>List Item 1</OPTION>
<OPTION>List Item 2</OPTION>
<OPTION>List Item 3</OPTION>
</SELECT>

The HtmlImage Class

This class creates an HTML <img> element, used to display images. Using the properties of this class, you change the image displayed and the image size, as well as the alignment of the image with respect to other HTML elements.

The HtmlInputHidden Class

This class creates an HTML hidden control. You can use an HTML hidden control to hold text that the user doesn't see; this text is sent when the Web page is posted back to the server. (As you know, the Web Forms page framework uses HTML hidden controls to automatically load and persist the view state of server controls on a page by default.)

The HtmlInputCheckbox Class

This class creates an HTML checkbox. As with other checkboxes, you use checkboxes in HTML to let the user toggle a setting on or off.

You can see an HTML checkbox in the HTMLControls example on the CD-ROM, as shown in Figure 19.1. This checkbox appears checked when it first appears, because I've set its checked property to True. When you make this control into a server control, you can handle the ServerChange event, which lets you examine the Checked property to see if the checkbox is selected or not.

The HtmlInputRadioButton Class

This class creates an HTML radio button. You can group radio button controls together by specifying a common value for the Name property of each radio button control that you want to include in the group. When you group radio buttons together, only one radio button in the group can be selected at a time.

You can see an HTML radio button in the HTMLControls example on the CD-ROM, as shown in Figure 19.1. When you make this control into a server control, you can handle the ServerChange event, which lets you examine the Checked property to see if the radio button is selected or not.

The HtmlTable Class

You use this class to create an HTML table. You can dynamically change the appearance of the <table> element by setting the BgColor, Border, BorderColor, Height, and Width properties in code. You also can control how the content of a cell is displayed by setting the Align, CellPadding, and CellSpacing properties. You can see an HtmlTable control in Figure 19.1 and in the HTMLControls example on the CD-ROM.

The rows of the HtmlTable control are stored in the Rows collection. This allows you to access the individual rows of the table in code.

The HtmlTableRow Class

This class creates an HTML row in a table. It's designed to give you access on the server to individual HTML <tr> elements within an HtmlTable control.

Usually, there is no need to use this class unless you want control over a table in code. When you add an HTML table control to a Web page, you can edit the values in the rows and cells directly, placing text in the cells, as you like.

The HtmlTableCell Class

This class creates an HTML cell in a table. You use the HtmlTableCell class to access individual HTML <td> and <th> elements in server code. (The <td> element represents a data cell in a table and the <th> element represents a table heading cell.)

As with the HtmlTableRow class, usually, there is no need to use this class yourself, unless you want control over a table in code. When you add an HTML table control to a Web page, you can edit the values in the rows and cells directly, placing text in the cells, as you like.

The HtmlInputFile Class

This class creates an HTML file upload control, which you can use to handle uploading binary or text files from a browser client to the server. This control includes a text box and a browse button to let the user browse for files to upload.

The HtmlGenericControl Class

This class creates a basic control for an HTML element. You can use it to create an HTML server control not directly represented by a .NET Framework class, such as <span>, <div>, <body>, and <font>. This is the class Visual Basic uses to display labels, using <div> elements.

Now we've seen the classes Visual Basic uses with HTML controls. To make all this clearer, I'll take a look at two examples next, showing how to use these controls both as HTML client controls and as HTML server controls.