The HTML server controls are processed by the web server and the use of .NET framework utilities is done. They are specified using the attribute runat="server" and the id attribute is added for server side processing. Advantages of HTML server controls There are various ASP.NET server controls used for performing the functionalities provided by the HTML server controls. But the controls can be used when: HTML page is converted to execute under ASP.NET Static tables for the layout use. Some of the HTML Server controls are explained below: 1. HTMLInputButton The HTML elements allow user to create submit button, reset button and command button. The server side maps to the <input type=button> and <input type=reset>. The general syntax for the InputButton control is: Code: <input type=button | submit | reset id="btn1" OnServerClick="onserverclickhandler" runat="server"> When the user clicks the HTML InputButton, input from the control is processed. The response is sent back to the client. 2. HTMLAnchor The HTMLAnchor is similar to the <a> tag. It creates an hyperlink useful for navigating from one page to another. The general syntax for the HTMLAnchor control is: Code: <a id="Anchor1" runat="server" name="User1" OnServerClick="onserverClickHandler" title="Value to be shown" target="linktosite" href="linkurl" > Welcome </a> where, id is the unique identifier assigned to the control name is the reference for the client side target is the frame or window on which the page is specified title is the tooltip value for the attribute href is the URL of the page on which it is linked 3. HTMLForm The server side control mapping the <form> HTML element and creates a container for the web page elements. The general syntax is: Code: <form id="form1" runat="server" action="pageURL" method= POST | GET > </form> 4. HTMLInputText The control is similar to HTML <input type="text"> tag but it works on the server. It collects the information from the user. The general form of the control is: Code: <input type=text | password id = "input1" maxlength = "maxnoofchar" size = "width" value = "textboxdata" runat="server" > where, id is the unique identifier for the control type specifies the mode of work size is the width of the control maxlength is the maximum number of characters added to the textbox value of the textbox or password box 5. HTMLInputCheckBox It works similar to the HTML checkbox control but executes on the server. The user can select values from the two option either yes or no. The general form of the control is: Code: <input type="checkbox" id="check1" Checked runat="server" > Where, id is the unique identifier for the control Checked states whether the control is checked 6. HTMLInputRadioButton It works similar to the HTML <input type = "radio"> tag. Multiple choice type questions can be created using the HTMLInputRadioButton control. The general syntax for the control is: Code: <input type="radio" runat="server" Checked Name="radiogroup" id="radio1"> Where, id is the unique identifier for the control Checked is the status of the button Name is the option button group Value is used to get or set the value of the control 7. HTMLSelect User can create a listbox using the HTMLSelect control. When user needs to select an option from the list, the control is used. The general form of the control is: Code: <select id="select1" runat="server" Items="optionelements" Multiple SelectedIndex="indexofcurrentitem" Size="noofitems" Value="itemvalue" > Where, id is the unique identifier Items provides the list of items Multiple states whether multiple items can be selected SelectedIndex is the index of the selected item Size is the number of visible items Value is the number of items selected 8. HTMLTable The table is created using the <table> element. The general form is: Code: <table id = "table1" runat="server" align =left | right | center bgcolor="background color" bordercolor="bordercolor" height = "tableheight" rows="rowscollection" width="tablewidth" cellpadding = "spacingwithincells" cellspacing ="spacingbetweencells" > <tr> <td></td> </tr> </table> Where, id is the id for the table created align specifies the alignment of the table bgcolor is the background color of the table bordercolor is the color of the border Height is the table height width is the table width cellpadding defines the space in the cells cellspacing is the distance between the cells Example of HTML control The following example shows the HTML table for the page layout. Perform the steps mentioned below: Open Visual Studio application in the system and create an ASP.NET web application. In the source view window, add the following code. Code: <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <table style="width:50%> <tr> <td style="width:150px">SrNo:</td> <td> <asp:TextBox ID="txt1" runat="server" style="width:200px"> </asp:TextBox> </td> </tr> <tr> <td >Name:</td> <td> <asp:TextBox ID="txt2" runat="server" style="width:200px"> </asp:TextBox> </td> </tr> <tr> <td >Course:</td> <td> <asp:TextBox ID="txt3" runat="server" style="width:200px"> </asp:TextBox> </td> </tr> <tr> <td id="Showrow" runat="server" style="width:200px"> </td> </tr> </table> </div> <asp:Button ID="btn1" runat="server" Text="Show" OnClick="btn1_Click" /> </form> </body> </html> In the code behind file, add the following code. Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btn1_Click(object sender, EventArgs e) { string s = " "; s += txt1.Text +"<br/>"; s += txt2.Text + "<br/>"; s += txt3.Text + "<br/>"; Showrow.InnerHtml = s; } } The following output is generated when the code is executed.
