53

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Alex York
  • 5,392
  • 3
  • 31
  • 27

8 Answers8

74

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>
Sean Bright
  • 118,630
  • 17
  • 138
  • 146
  • 6
    I too use this approach but always set EnableViewState="False" for the label tag, particularly if it is a substantial form. The smaller the viewstate the better in my opinion. See http://stackoverflow.com/questions/113479/when-to-enable-disable-viewstate – Jon P Jan 29 '09 at 23:02
  • Agreed. It was left out for brevity. – Sean Bright Jan 29 '09 at 23:03
  • 3
    I find it easier to turn ViewState off in Web.Config page settings and turn it on on only the controls you need it for. Yes, ViewState really adds up and slow things down if you just leave it on for all controls. – Brian Kim Jan 29 '09 at 23:05
  • You want to be careful as well. It may be that you want a – Eduardo La Hoz Miranda Mar 14 '14 at 20:44
  • 4
    If the asp:Label control has an AssociatedControlID, it will correctly render a – goodeye Nov 03 '14 at 01:30
  • This is what we do but I've just found out it breaks if you change the labels text in anyway. eg `UsernameLabe.Text = "some error message"` will cause the TextBox control to disappear and it will throw an HttpException because it can't find the associated control. – Jag Aug 10 '15 at 13:50
  • Does it make a difference to nest other tags within the Label control? – Félix LD Aug 20 '15 at 18:21
17

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

Christian Hagelid
  • 8,275
  • 4
  • 40
  • 63
10

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" />
Matt Brunell
  • 10,141
  • 3
  • 34
  • 46
7

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Brian Kim
  • 24,916
  • 6
  • 38
  • 26
4

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" />
RMalke
  • 4,048
  • 29
  • 42
3

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

Christian Hagelid
  • 8,275
  • 4
  • 40
  • 63
-1

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.

magn
  • 46
  • 1
  • 12
-1
<p><asp:Label ID="label1"           Text="Username:"           AssociatedControlID="txtUserName"           runat="server">    <asp:TextBox ID="txtUserName" runat="server" /></asp:Label></p>
chugh97
  • 9,602
  • 25
  • 89
  • 136