Introducing Web Form Controls
As mentioned earlier, ASP.NET provides two sets of controls you can choose
from when developing Web Forms. We suggest you spend most of your time
using the standard Web Forms controls. You might also need to support
existing HTML or ASP pages and therefore might need to investigate the HTML
controls. The following subsections describe both types of controls.
HTML Controls
HTML controls mimic the actual HTML elements you would use if you were
using FrontPage or any other HTML editor to draw your UI. You can use
standard HTML elements in Web Forms, too. For example, if you wanted to
create a text box, you would write the following:
<input type="text" id=txtFirstName size=25>
If you are using Visual Studio .NET, you choose a Text Field control from
the HTML tab on the Toolbox window and draw the control where you want it
on the Web Form.
Any HTML element can be marked to also run as an HTML control when the Web
Form is processed on the server by adding the runat attribute to the tag
and setting its value to be "server", as shown here:
<input type="text" id=txtFirstName size=25 runat="server">
If you are using Visual Studio .NET, you can right-click the HTML element
in Design View and select Run as Server Control from the context menu. By
adding the runat="server" attribute, you allow ASP.NET to process
server-side events for the control, thus adding an enormous level of power
and flexibility to your page.
HTML controls allow you to handle server events associated with the tag (a
button click, for example) as well as manipulate the HTML tag
programmatically in the Web Form's code. When the control is rendered to
the browser, the tag is rendered just as it is saved in the Web Form, minus
the runat="server" part. This gives you precise control over the HTML that
is sent to the browser. Table 6.1 lists the HTML controls available in
ASP.NET.
Table 6.1. HTML Controls Available in ASP.NET Control Description Web
Form Code Example
Button Used to respond to click events. <input type=button runat=
server>
Reset Button Resets all other HTML form elements on a form to their
default values.\ <input type=reset runat=server>
Submit Button Automatically posts the form data to the specified page
listed in the Action= attribute in the FORM tag. <input type=submit
runat=server>
Text Field Gives the user an input area on an HTML form. <input type=text
runat=server>
Text Area Used for multiline input on an HTML form. <input type=textarea
runat=server>
File Field Places a text field and a Browse button on a form and allows
the user to select a file name from the local machine after clicking the
Browse button. <input type=file runat=server>
Password Field An input area on an HTML form. Any characters typed into
this field are displayed as asterisks. <input type=password runat=server>
Check Box Gives the user a check button that he can select or clear.
<input type=checkbox runat=server>
Radio Button Always used in groups of two or more. Allows the user to
choose one of the options within the group. <input type=radio
runat=server>
Table Allows you to present information in a tabular format. <table
runat=server></table>
Image Displays an image on an HTML form. <img src="FileName"
runat=server>
List Box Displays a list of items to the user. You must set the size
attribute to a value greater than 1 in order to see the items in a list.
(Setting the size attribute to 1 or omitting the attribute displays the
items in a drop-down list.) You can set the size from two or more to
specify how many items you wish to show. If there are more items than will
fit within this limit, a scroll bar is automatically added to this
control. <select size=2 runat=server > </select>
Dropdown Displays a list of items to the user, but only one item at a time
will appear. The user can click a down arrow from the side of this control
and a list of items will be displayed. <select><option></option></select>
Horizontal Rule Displays a horizontal line across the HTML page. <hr>
All these controls emit standard HTML into the Web Form. You may optionally
assign an ID attribute to each control,
