In HTML, authors use <input> tag to create a text field or radio button or checkbox and <label> tag to provide a proper label for the input fields. The label and input fields are associated using ‘for’ and ‘id’ attributes. The value of ‘for’ attribute must be equal to value of ‘id’ attribute.
<label for=”firstname”>First Name</label><input type=”text” name=”fname” id=”firstname” />
Like HTML, ASP.NET has its own form controls for label and input elements. They are not same as those used in HTML. Let us see the asp.net equivalent tags for textbox, select drop down, check box and radio button.
Textbox:
The label and text box in asp.net is written as
<asp:Label runat="server">First Name</asp:Label>
<asp:TextBox ID="firstname" runat="server" />
In asp.net, <asp:Label> will not support the conventional “for” attribute which is used to map the text fields. A property named “AssociatedControlID” is used for <asp:label> control. It is equivalent to “for” attribute in HTML. The value of “AssociatedControlID” must be equal to ID of text box.
<asp:Label AssociatedControlID=”firstname” runat="server">First Name</asp:Label>
<asp:TextBox ID="firstname" runat="server" />
The above asp.net code is converted into HTML when it is compiled and rendered in a browser. The “AssociatedControlID” attribute is converted to “for” attribute.
<label for=”firstname”>First Name</label>
<input type=”text” name=”firstname” id=”firstname” />
Note: If “AssociatedControlID” is not used, <asp:Label> is rendered as a <span> element instead of <label>.
<asp:Label runat="server">First Name</asp:Label> will be rendered as <span>First Name</span>
Checkbox & Radio button:
Unlike text field where explicit <asp:label> should be defined, it is not required to use <asp:label> explicitly for a checkbox and radio buttons in asp.net. Instead a property called “TEXT” has to be defined in checkbox tag and radio button.
<asp:CheckBox ID=”checkboxtest” text="Web Accessibility" runat="Server" />
It will be rendered as<input id=”checkboxtest” type=”checkbox” name=”checkboxtest” /><label for=”checkboxtest”>Web Accessibility</label> <asp:RadioButton ID=”radiobuttontest” GroupName=”web” text="Web Accessibility" runat="Server" />
Fieldset:
To group the similar form fields, fieldset is used in HTML with a descriptive legend. Similarly in asp.net, “panel” is used to group the similar form elements.
<asp:Panel ID=”panelmain” runat=”server”>Form fields goes here</asp:Panel>
Browser generates <asp:Panel> tag as <fieldset> tag enclosed in <div>.
<div id=”panelmain”><fieldset>Form fields goes here</fieldset></div>
To get a legend tag, a property names “GroupingText” has to be used for <asp:Panel> tag
<asp:Panel ID=”panelmain” runat=”server” GroupingText=”Sample grouping”>Form fields goes here</asp:Panel>
Browser generates it as
<div id=”panelmain”>
<fieldset><legend>Sample Grouping</legend>
Form fields goes here</fieldset>
</div>
