How to use the <label> tag in ASP.NET?

Question

How can I use the <label> tag within an ASP.NET application? I want it to be valid, accessible, and usable.

I understand the optimal HTML 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 its "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 proper 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

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

Answer 3

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 4

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>

Answer 5

If you are using .NET 4 you can now use the ClientIDMode property to configure one or more controls to use static or predictable ID's. The ClientIDMode property can be set on the TextBox directly or you can set it on any parent control or the containing page.

<label for="Username">Username:</label>
<asp:TextBox ID="Username" runat="server" ClientIDMode="Static" />

Read more about the ClientIDMode on MSDN

Answer 6

If you want a label, but don't have another control to use in AssociatedControlID one can use the label itself

<asp:Label ID="Not_Span" AssociatedControlID="Not_Span" Text="Will be rendered as label" />

Answer 7

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

Answer 8

You my also try and this:

<asp:Label  ID="Label1" runat="server" Text="label"></asp:Label>

This is what Visual Studio, or any other software gives you if you drag and drop a label.