Stop using the ASP.NET label control for arbitrary text/HTML!

With the advent of HTML 5 and the corresponding effort to write more semantically correct output from ASP.NET web forms, I thought I would write a quick post on this oldie-but-goodie.

My point is that while many ASP.NET developers got in the habit of using the ASP.NET label control for any old text/HTML they wanted to transform programmatically and output to their webpage, this is incorrect. Programmers who use the label tag this way, as a general-purpose text output tag, are using it incorrectly!

What the label control does

The ASP.NET label control will, indeed, output text, but it outputs that text as an HTML <label> control, not just as text. However, the HTML <label> tag has a very specific and narrow purpose.

The purpose of the <label> tag is to output text that describes, and is associated with, an input control: http://www.w3schools.com/tags/tag_label.asp. Therefore, using it simply to output text is incorrect.

When correctly written, the <input> tag has a for attribute which contains the name of the <input> element the text is associated with. This is done for you automatically as part of the ASP.NET rendering, as long as you set the AssociatedControlId property of the ASP.NET label control. Furthermore, when the for attribute is properly set, it yields additional benefits: the text it outputs becomes, in a sense, part of the associated <input> element. This means that when the user clicks on the text in a properly coded HTML <label>, it is the same as clicking on the <input> element itself! If the associated input is a radio button, clicking the <label> text will toggle the selection in the little circle of the radio button. If it’s simply a text input, clicking the <label> text will position the mouse caret inside the text input box, ready for the user to type.

Think about how helpful this can be for users of your webpage that have limited eyesight, less-than-average coordination, etc.: they can click on the descriptive text, rather than a tiny little radio button! Much easier for someone without the fine muscle control and eye-hand coordination most of us are blessed with.

You should now understand why using the ASP.NET label control as a general-purpose text output control results in outputting invalid and semantically incorrect HTML.

So what’s the answer? What is the correct way?

The correct way, as many of you may know, is to use another ASP.NET control, one designed specifically for outputting text/html: the literal control

Using this control at design-time is simple: just place the control on the page, then type the  text and/or html you want to be written to the HTML output inside the control’s tags, though there is not much benefit to doing this. Much more useful is programmatically outputting text  to the literal control, as you can manipulate the text/html in code at runtime any way you please.

I should remind you here that what gets output is plain text; you will not get HTML tags in the output unless you put them there!

Finally, for the sake of completeness, I should add that label controls in versions of ASP.NET prior to 2.0 are different beasties. I believe they don’t support the AssociatedControlId property, and require the runat=”server” attribute. I haven’t touched these older versions of ASP.NET since 2.0 came out, so YMMV!

More info:

Advertisements

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: