The HtmlForm control creates a server-side <form> tag. Most HTML controls, Web controls, etc., must be placed inside an HtmlForm control.

<form runat="server">
<!-- ASP.NET controls in here -->
</form>

The HtmlImage control creates a server-side <img> tag. The following code shows how we might place an HtmlImage control on a page, along with an HtmlButton:

<img id="myimage" src="arrow.gif" runat="server" />
<button id="myButton" runat="server" OnServerClick="Click">Click 
Here</button>

The user could change this image dynamically by pressing the button if we add code as follows:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  myimage.Src = "welcome.gif"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  myimage.Src = "welcome.gif";
}
</script>

What will happen if these controls are placed on a page along with the script block? First of all, the image arrow.gif will appear. When the HtmlButton control is clicked, it changes to welcome.gif. Behind the scenes, the ServerClick event is raised when the button is clicked, thus the Click() subroutine is called, and the Src property of the HtmlImage control is changed from arrow.gif to welcome.gif.

The HtmlGenericControl creates a server-side control for HTML tags that do not have an HTML control associated with them. Perfect examples of this are the <span> and <div> tags. The following example illustrates how you can modify text within a <span> tag to change the content from I like ASP.NET to Why would anyone need PHP? dynamically.

<span id="myGenericControl" runat="server">I like ASP.NET</span>
<br />
<button id="myButton" runat="server" OnServerClick="Click">Click 
Here</button>

We simply add the following code to respond to the ServerClick event and change the text:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  myGenericControl.InnerText = "Why would anyone need PHP?"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  myGenericControl.InnerText = "Why would anyone need PHP?";
}
</script>

The HtmlInputButton control creates a server-side <input type="submit">, <input type="reset">, or <input type="button"> HTML tag.

<input type="submit" value="Click Here" runat="server" />

<input type="reset" value="Click Here" runat="server" />

<input type="button" value="Click Here" runat="server" />

As with HtmlButton, you can assign a server-side event handler to controls of this type with the OnServerClick attribute.

The HtmlInputCheckBox control creates a server-side <input type="checkbox"> HTML tag.

<input type="checkbox" id="cb1" value="ASP.NET" runat="server"
  />ASP.NET<br />
<input type="checkbox" id="cb2" value="PHP" runat="server"
  />PHP<br />
<input type="checkbox" id="cb3" value="JSP" runat="server"
  />JSP<br />
<input type="checkbox" id="cb4" value="CGI" runat="server"
  />CGI<br />
<input type="checkbox" id="cb5" value="Coldfusion" runat="server"
  />Coldfusion<br>

The HtmlInputCheckBox control is the perfect choice when you want to allow your users to select multiple items from a list.

The HtmlInputFile control creates a server-side <input type="file"> tag in the HTML. This displays a text box and Browse button to allow users to upload files from ASP.NET pages. There is no Web control equivalent for this tag, so it’s typically required when working with file uploads—even with Web Forms (which we’ll discuss shortly).

<input type="file" id="fileUpload" runat="server" />

The HtmlInputHidden control creates a server-side <input type="hidden"> tag.

<input type="hidden" id="hiddenField" runat="server" />

Try viewing the source of any one of your ASP.NET pages from your browser, and you’re likely to find this tag being used to store view state information.

The HtmlInputImage control creates a server-side <input type="image"> tag.

<input type="image" id="imgMap" runat="server"
  src="ButtonImage.jpg" />

This tag provides an alternative to the HtmlInputButton control. They both function in the same way; the difference is that the HtmlInputImage control uses a custom image rather than the beveled gray Windows-style button. The mouse coordinates are also sent along with the form submission when the user clicks a control of this type.

The HtmlInputRadioButton control creates a server-side radio button. The following code, for instance, offers a choice of Male or Female:

Gender?<br />
<input type="radio" id="radio1" runat="server" />Male<br />
<input type="radio" id="radio2" runat="server" />Female

Similar to the HtmlInputCheckBox control, the HtmlInputRadioButton control creates a list of items for users to choose from. The difference, however, is that the user is only able to select one item at a time.

The HtmlInputText control creates a server-side <input type="text"> or <input type="password"> tag.

Please Login<br />
Username:<br />
<input type="text" id="username" runat="server" /><br />
Password:<br />
<input type="password" id="password" runat="server" />

The preceding code creates a typical login screen layout.

The HtmlSelect control creates a server-side version of the <select> tag for creating drop-down lists or list boxes. The following code creates a drop-down menu:

Select your favorite movie:<br />
<select id="selectMovie" runat="server">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

The following code creates a multiple-selection list box:

Which of these movies do you like?<br />
<select id="selectMovie" runat="server" multiple="true" size="4">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

You’ll notice the <option> tag within the main <select> tag; this is used to denote each item to appear in the list box or drop-down menu.

The HtmlTable, HtmlTableRow, and HtmlTableCell controls create server-side versions of the <table>, <tr>, <td>, and <th> tags. The following code creates a server-side table:

<table id="myTable" border="1" cellspacing="0" cellpadding="0" 
runat="server"> 
<tr runat="server" id="row1">
<td runat="server" id="cell1">Table Data 1</td>
<td runat="server" id="cell2">Table Data 2</td>
</tr>
<tr runat="server" id="row2">
<td runat="server" id="cell3">Table Data 3</td>
<td runat="server" id="cell4">Table Data 4</td>
</tr>
</table>
<button id="myButton" OnServerClick="Click" runat="server">Click 
Here</button>

You could add the following code to respond to the Click event raised by the HtmlButton control and change the content of the first cell to read "Hello World."

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  cell1.InnerText = "Hello World"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  cell1.InnerText = "Hello World";
}
</script>

The HtmlTextArea control creates a server-side version of the <textarea> tag.

<textarea cols="60" rows="10" runat="server"></textarea>

We’ve glanced only briefly over the HTML controls, as they should all be fairly familiar from your experience with HTML. But if you’d like more information on the HTML controls including the properties, methods, and events for each, see Appendix A, HTML Control Reference.