Html label tag and ASP.NET

Question

What is the best way to use the <label> tag within an ASP.NET application? I want it to be XHTML valid, accessible and usable.

I understand the optimal way is this:

<label for="Username">Username:</label>
<input type="text" id="Username" runat="server" />

But if the above code is in an ASP.NET user control, the input ID will change, meaning the label's "for" attribute is useless. I could make the label tag a server control and set it's "for" attribute in the code (Username.ClientID) but it seems like a lot of work for such a simple thing.

I've also seen this HTML used in the past:

<label>
    <span>Username</span>
    <input type="text" id="Username" runat="server" />
</label>

What is the optimal approach?

Answer 1

I use <asp:Label ... AssociatedControlID="Username" ...> controls for this. They get rendered as <label> tags and set the for attribute appropriately.

Note that you can also nest other tags within the Label control if you wish:

<asp:Label ID="UsernameLabel"
           Text="Username:"
           AssociatedControlID="UsernameTextBox"
           runat="server">
    <asp:TextBox ID="UsernameTextBox" runat="server" />
</asp:Label>

Answer 2

use the <asp:Label> server control. It has a property that you can use to set the associated control ID.

<asp:Label ID="label1" runat="server" Text="Username" AssociatedControlID="Text1" />
<asp:TextBox ID="Text1" runat="server" />

Answer 3

I guess the easiest way to do it is this.

<asp:Label AssociatedControlID="Username" runat="server" Text="Username:"></asp:Label>
<asp:TextBox ID="Username" runat="server"></asp:TextBox>

EDIT: Wow.. all same answers within a minute. =)

Answer 4

<p><asp:Label ID="label1"           Text="Username:"           AssociatedControlID="txtUserName"           runat="server">    <asp:TextBox ID="txtUserName" runat="server" /></asp:Label></p>

Answer 5

You can also write it like this:

<label for="<%= Username.ClientID %>">Username:</label>
<asp:TextBox ID="Username" runat="server" />

Phil Haack has a blog post on this topic