ASP.NET Tip - Use The Label Control Correctly

Scott Watermasysk has a great set of Quick Tips for ASP.NET on his blog. And this is only part one! I’m Looking forward to seeing the subsequent posts of this series.

However, I disagree slightly with his tip to Never use the ASP.NET Label control. I would rephrase it to:

Never use the ASP.NET Label control when a Literal would do.

The problem is not the Label control. The problem is treating the Label control as if it was merely a Literal control.

The Label control has a specific usage, to be a label for a form input. For example, check out this screenshot of a text label and textbox.

Textbox control and label

Let’s look at one way to create this simple form using a Literal control (Notice I’m getting the value from a Resource file because we all want to be internationally friendly, right? But it also points out why I use an actual control rather than just typing the label directly).

<asp:Literal id="label" Text="<%$ Resources:UserName %>" 
runat="server" /> <asp:TextBox id="textbox" runat="server"/>

When you click on the word Username what happens? Nothing. Wouldn’t it be nice if the Textbox next to the literal was given focus? Here’s how:

<asp:Label id="label" AssociatedControlId="textbox" 
Text="Username" runat="server" /> <asp:TextBox id="textbox" runat="server" />

Now, we’ve associated the label to the control. The underlying HTML looks something like (simplified for the sake of discussion):

<label for="textbox">Username</label> <input type="textbox" name="textbox" value="" />

This associates the label Username with the textbox control, so when you click on label, the textbox gets focus.

So why use the Label server control here? Why not just use the <label /> html tag directly?

Because you might not know at compile time what the client id of the TextBox will actually end up as. What if these two controls were inside a UserControl inside a page? The ID might get a bit funky as its nested in a control within a control.

Technorati Tags: , ,
[ad] Free Bug Tracking & Project Management Software Axosoft’s OnTime 2007 allows software development teams to collaborate on software projects by tracking everything from defects to enhancements to helpdesk incidents in one easy-to-use database driven by an intuitive Windows, Web or VS.NET Integrated UI. Get a Free Single-User License ($200 Value!)

What others have said

Requesting Gravatar... Scott Watermasysk Feb 15, 2007 1:03 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Someone (Dusty) already called me out on this one. :)

I have to admit that I never knew you could do that with the label control. Not sure how I missed it all this time. I even went as far as adding a custom control to community server which does the same thing as Label.AssociatedControlId.

It is a big framework and I still learn something new everyday. :)

Thanks,
Scott
Requesting Gravatar... Danuz Feb 15, 2007 1:15 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Hello!

You have a small mistake. the for attribute of the Label should be textbox to work wells. :)
Requesting Gravatar... Scott Watermasysk Feb 15, 2007 1:20 PM
# re: ASP.NET Tip - Use The Label Control Correctly
BTW, you could also do:

<label for ="<%= TextBox.ClientID %>">Description:</label>
<asp:TextBox id = "TextBox" runat = "Server" />
Requesting Gravatar... Ancora Imparo Feb 15, 2007 1:29 PM
# Quick Tips For ASP.Net - Part One
Just about everyone has been to a session on ASP.Net best practices, read a book or 10 on the subject
Requesting Gravatar... Mark Wisecarver Feb 15, 2007 2:31 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Have to admit, knowing this or not, seeing these cross-blog posts today was very helpful, thanks guys.
Requesting Gravatar... idunno.org Feb 15, 2007 2:54 PM
# asp:label, the schizophrenic control
asp:label, the schizophrenic control
Requesting Gravatar... Haacked Feb 15, 2007 3:07 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Thanks! I Corrected
Requesting Gravatar... Haacked Feb 15, 2007 3:08 PM
# re: ASP.NET Tip - Use The Label Control Correctly
@Scott: Good point. Although that can be problematic when dynamically loading controls.
Requesting Gravatar... TheChaseMan's Frenetic SoapBox Feb 15, 2007 3:12 PM
# Label and Literal Controls in ASP.NET
Requesting Gravatar... Joshua Flanagan Feb 15, 2007 3:20 PM
# re: ASP.NET Tip - Use The Label Control Correctly
The reason for the confusion (and the reason Scott probably didn't know about it), is because this wasn't true until .NET 2.0.

With the ASP.NET 1.1 Label control, there was no AssociatedControlId property - it really was just a brain dead Literal that just rendered a span tag.

With all the fanfare of the new controls and functionality in 2.0, somehow a new property on the lowly Label control got overlooked ;)
Requesting Gravatar... Willie Tilton Feb 15, 2007 4:14 PM
# re: ASP.NET Tip - Use The Label Control Correctly
I believe the biggest use out of using the label tag is for check boxes and radio buttons. Instead of clicking the small box or rounded dot, I (and others I'm sure) like clicking the associated text.

In fact you can associate a label with any other form type of control, not just the text box. Drop downs and text areas will work too.

Two other important attributes that you can add with a label are the AccessKey and Tooltip, mainly for accessibility.
Requesting Gravatar... Damien Guard Feb 15, 2007 5:10 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Hmmm... I'm sure I submitted a fix for Subtext's login form to use labels a while back...

[)amien
Requesting Gravatar... Wyatt Barnett Feb 16, 2007 7:27 AM
# re: ASP.NET Tip - Use The Label Control Correctly
Damnit Phil, you beat me to my pro-label rant!

With the ASP.NET 1.1 Label control, there was no AssociatedControlId property - it really was just a brain dead Literal that just rendered a span tag.


Not quite--I used it all the time in 1.1 apps. Now, the issue was Visual Studio 2003 did not recognize it as a legitimate property and complained. But we all learned to ignore VS 2003's complaints, right?
Requesting Gravatar... Bill Robertson Feb 16, 2007 11:59 AM
# re: ASP.NET Tip - Use The Label Control Correctly
I have a ajaxy control that assists in wiring up labels to their associated input boxes without need to use <asp:label, <label runat="server", or other server side resources.

http://billrob.com/archive/2007/02/16/my-way-to-assign-for-attribute-on-labels.aspx
Requesting Gravatar... Jason Haley Feb 17, 2007 9:53 AM
# Interesting Finds: February 17, 2007
Requesting Gravatar... Christopher Steen Feb 17, 2007 8:35 PM
# Link Listing - February 17, 2007
ASP.NET Tip - Use The Label Control Correctly [Via: Haacked ] Exiting The Zone of Pain - Static Analysis...
Requesting Gravatar... Joshua Flanagan Feb 18, 2007 2:38 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Very interesting, Wyatt. I even double-checked by looking in the documentation before i posted. It also supports my claim that AssociatedControlId was not around until .NET 2.0:
http://msdn2.microsoft.com/system.web.ui.webcontrols.label.associatedcontrolid.aspx
(see the Version Information section)

But, alas, I opened up Reflector, and sure enough, its there in 1.1. IL always trumps intellisense and documentation.
Requesting Gravatar... Adlai Maschiach Feb 21, 2007 11:23 PM
# Scott Watermasysk strikes again
One of the lately talked about articles in ASP.NET community are the articles which Scott Watermasysk
Requesting Gravatar... communityserver相关博客聚合 Mar 08, 2007 2:14 AM
# Quick Tips For ASP.Net - Part One
Just about everyone has been to a session on ASP.Net best practices, read a book or 10 on the subject,
Requesting Gravatar... TC May 17, 2007 1:04 PM
# re: ASP.NET Tip - Use The Label Control Correctly
Great tip! Thanks.
Requesting Gravatar... Roki Oct 01, 2007 5:38 AM
# re: ASP.NET Tip - Use The Label Control Correctly
Also, if you use the "text" attribute on an asp:checkbox it will generate an associated label:

<asp:checkbox id="chkBox1" runat="server" text="Text for label control goes here"></asp:checkbox>
Requesting Gravatar... brian pina Feb 08, 2008 9:32 AM
# re: ASP.NET Tip - Use The Label Control Correctly
This helped a lot. Thanks =]
Requesting Gravatar... R. Schreurs Apr 15, 2008 6:25 AM
# re: ASP.NET Tip - Use The Label Control Correctly
ASP.Net will allow me to choose an instance of a web user control as the associated control of an asp:label control. Does anybody have suggestions for a proper way to associate a label with a control inside the web user contol instance (other then the option to put the label inside the webusercontrol)?
Requesting Gravatar... Dityo Nurasto Apr 30, 2008 3:12 AM
# re: ASP.NET Tip - Use The Label Control Correctly
Thank you, help me to understand to proper use of label. I was thought label is the same with the label component on desktop development.

What do you have to say?

(will show your gravatar)
Please add 6 and 2 and type the answer here: