Seems that a new HTML tag pop-ups every once in a while that I wasn’t aware of.  Today it’s the <label> tag.

So what is the label tag for? Using the label allows the user to click on the text associated with a form control instead of having to click on the radio button, check box, select box, etc.

Granted, this isn’t likely to be hugely useful to you, but I know I’ve often found it convenient to simply click on text next to a check box (or similar form field) when I’m in a hurry, hence it increases the usability of your page.

However, if an accessible web site for the visually impaired, using the label tag helps those who visit your site with a screen reader to associate a fields label with the field that it belongs to.

How do you use it?  Here is how:

<label for="radio1">This Radio Button 1 has a label associated with it.</label>

<input type="radio" value="Selected" name="Radio" id="radio1">

One thing I find convenient about the label is that I can now create a CSS style for the HTML label tag and know that all the field labels will be formatted the same. I no longer have to create a <span> or <div> tag with a special CSS class for field labels.

However, in ASP.NET, I could envision the label not working as it’s supposed to in many cases because it’s often hard to predict the name of the field controls.  For example, if I have a textbox with an ID of “txtFirstName” which is nested in a User Control, which is nested in a Page, which is nested in a Master Page, ASP.NET will rename the control and it’s ID to something like “ctl001 MyMasterPage MyPage MyUserControl txtFirstName.”

With that in-mind, the functionality of the label control might be limited in ASP.NET applications, but at least it provides a new tag to bind CSS to!

Update - 01/06/2006

Those guys at Microsoft are no dummies... they made sure the ASP.NET 2.0 Framework produces standards compliant and accessible code.  To assure that your ASP.NET 2.0 form fields are properly labeled, you must use the AssociatedId property for the ASP.NET Label control in order to make the .NET Framework spew the correct HTML:

    <table>
    <tr>
        <td><asp:Label AssociatedControlID="txtFirstName"
          runat="server">First Name:</asp:Label></td>
        <td><asp:TextBox ID="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
        <td><asp:Label AssociatedControlID="txtLastName"
          runat="server">Last Name:</asp:Label></td>
        <td><asp:TextBox ID="txtLastName" runat="server" /></td>
    </tr>
    </table>