HTML Server Controls

Examples of ASP.NET Server Controls

As it was mentioned before, there are two types of server-side form controls in ASP.NET: HTML Server Controls and ASP.NET Server Controls. Here are some examples of these controls.

HTML Server Controls

HTML server controls are different from HTML controls only that an added attribute, runat = “server” is included in the regular HTML controls. Thus these controls are run in the server. Following are some examples of HTML server controls.

HtmlGeneric Control:

The HtmlGeneric control is used to control other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, <font>, <p>, etc. The following are the attributes of the HtmlGeneric controls.

HTML Anchor Control: <a runat = “server”>

The HtmlAnchor control is used to control an <a> element. In HTML, the <a> element is used to create a hyperlink. The hyperlink may link to a bookmark or to another Web page.

Property / Description
Attributes / Returns all attribute name and value pairs of the element
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
HRef / The URL target of the link
id / A unique id for the control
InnerHtml / Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText / Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Name / The name of the anchor
OnServerClick / The name of the function to be executed when the link is clicked
runat / Specifies that the control is a server control. Must be set to "server"
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Target / The target window to open
Title / A title to be displayed by the browser (like the alt attribute of the img element)
Visible / A Boolean value that indicates whether or not the control should be visible
<script runat="server">
Sub Page_Load
link1.HRef="
link2.HRef="
End Sub
</script>
<html<body>
<form runat="server">
<a id="link1" runat="server">Visit W3Schools!</a>
<br />
<a id="link2" runat="server">Visit Microsoft!</a>
</form>
</body</html>

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:View HTMLAnchor

HTML Button Control: <button runat = “server”>

The HtmlButton control is used to control a <button> element. In HTML, the <button> element is used to create a push button.

The following codes create two buttons with different colors and texts. When clicked, each button runs a script on the click event, responding with a text on the browser.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:View HTMLButton

HTML Input Button Control: <input runat = “server”>

The HtmlInputButton control is used to control <input type="button">, <input type="submit">, and <input type="reset"> elements. In HTML, these elements are used to create a command button, a submit button, and a reset button.

Property / Description
Attributes / Returns all attribute name and value pairs of the element
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
id / A unique id for the element
Name / The name of the element
OnServerClick / The name of the function to be executed when the button is clicked
runat / Specifies that the element is a server control. Must be set to "server"
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Type / The type of the element
Value / The value of the element
Visible / A Boolean value that indicates whether or not the control should be visible

In the example below, <input> tag is used for both an input box and a submit button using the “type” attribute set to “text” and “submit” respectively. Note the submit button was used by the <button> tag in the previous example. The program takes input from the text box and upon clicking the submit button, displays the text.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:View HTMLInputButton

HTML Textarea Control: <textarea runat = “server”>

The HtmlTextArea control is used to control a <textarea> element. In HTML, the <textarea> element is used to create a text area.

Property / Description
Attributes / Returns all attribute name and value pairs of the element
Cols / The number of columns of the text area
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
id / A unique id for the control
InnerHtml / Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText / Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Name / The unique name for the text area
OnServerChange / The name of the function to be executed when the contents of the textarea is changed
Rows / The number of visible rows of the text area
runat / Specifies that the control is a server control. Must be set to "server"
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Value / The content of the textarea
Visible / A Boolean value that indicates whether or not the control should be visible

The following example creates a text area and a submit button. Upon entering some text in the input box and clicking on the submit button, the system responds with the text entered.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:View HTMLTextarea

HTML Input Checkbox: <input type="checkbox" runat="server">

The HtmlInputCheckBox control is used to control an <input type="checkbox"> element. In HTML, this element is used to create a checkbox.

Property / Description
Attributes / Returns all attribute name and value pairs of the element
Checked / A Boolean value that specifies whether or not the element is to be checked
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
id / A unique id for the control
Name / The name of the element
runat / Specifies that the element is a server control. Must be set to "server"
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Type / The type of the element
Value / The value of the element
Visible / A Boolean value that indicates whether or not the control should be visible
Event / Description
ServerChange / Occurs when the state of the control has changed

CheckBox Example:In the following example, two checkboxes are created using the <input> tag with the added attribute type = “checkbox”. The following codes create two checkboxes and a submit button. Upon checking on a box and pressing the submit button, the system responds with a text corresponding to the button checked. The script then initializes the check boxes to its original state.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:

View HTML Input Checkbox

HTML Input Radiobutton: <input type="radio" runat="server">

The HtmlInputRadioButton control is used to control an <input type="radio"> element. In HTML, this element is used to create a radiobutton.

Property / Description
Attributes / Returns all attribute name and value pairs of the element
Checked / A Boolean value that specifies whether or not the element is to be selected
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
id / A unique id for the element
Name / The name of the radio button group
runat / Specifies that the element is a server control. Must be set to "server"
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Type / The type of the element
Value / The value of the element
Visible / A Boolean value that indicates whether or not the control should be visible

RadioButton Example: The following example creates three radio buttons using the HTML input control with the type attribute set to “radio”. Note, each button is identified with an “id” attribute, which is used in the script. Also, all three buttons have the same name so that they can be used together, i.e., only one can be selected at a time. Upon selecting a radio button and pressing the submit button results a responding text appropriate for the selected radio button.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:

View HTMLRadioButton

HTMLImage: <img runat="server" />

The HtmlImage control is used to control an <img> element. In HTML, the <img> element is used to display an image.

Property / Description
Align / How to align the image according to surrounding elements. Legal values are: top, middle, bottom, left, and right
Alt / A short description of the image
Attributes / Returns all attribute name and value pairs of the element
Border / The width of the borders around the image
Disabled / A Boolean value that indicates whether or not the control should be disabled. Default is false
Height / The height of the image
id / A unique id for the control
runat / Specifies that the control is a server control. Must be set to "server"
Src / The URL of the imageto display
Style / Sets or returns the CSS properties that are applied to the control
TagName / Returns the element tag name
Visible / A Boolean value that indicates whether or not the control should be visible
Width / The width of the image
<script runat="server">
Sub Page_Load(Sender As Object,E As EventArgs)
image1.Src="smiley.gif"
End Sub
</script>
<html>
<body>
<form runat="server">
<img id="image1" runat="server" />
</form>
</body>
</html>

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:

View HTMLImage

ASP.NET Server Controls

As it was mentioned before, ASP.NET from controls are used to collect information from a user through a Web form. These controls may not directly correspond to the HTML controls – some of the names might be different. These controls have properties or attributes; however they are not defined like before, but hey are accessed through tools such as Visual Studio.NET or through program codes.

The ASP.NET Label Control: <asp:label runat=”server”>

This control provides an effective way of displaying text on the Web page.

It is equivalent to HTML <span> tag. It has a set of attributes such as backcolor, forecolor, height, id, text, and visible. The “id” attributes is equivalent to the “name” in the HTML controls.

<asp:label id=”message1” forecolor =”red” runat= “server”>Hello</asp:label>

Property / Description
id / A unique id for the control
runat / Specifies that the control is a server control. Must be set to "server"
Text / The text to display in the label

In the labelcontrol.aspx file below, a label control is used to display some texts – there is no script in the file.

<html>
<head>
<title>Label Control page</title>
</head>
<body>
<h1>Feiertag Holidays</h1>
<br /<br />
Thank you
<asp:label id="Message1" runat="server" text="Chris"/>
you have selected to receive information about
<asp:label id="Message2" runat="server" text="Oslo"/>
. The information pack will be sent out within the next 24 hours.
</body>
</html>

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this:Run labelcontrol.aspx

In the labelcontrol2.aspx file below, scripts are added to apply the “text” property of the label control in a different way.

You can use a text editor to copy the code and save the file with a .aspx extension in your web folder. Then use full url to view the page like this: