MySpace


Courts



Last Updated: 11/13/2009

Send Message
Instant Message
Email to a Friend
Subscribe

Gender: Male
Status: Single
Age: 45
Sign: Pisces

City: LOS ANGELES
State: Kansas
Country: US
Signup Date: 1/11/2005

Who Gives Kudos:



My Subscriptions
June 30, 2009 - Tuesday 

Current mood:  groggy
Category: Web, HTML, Tech

A <label> tag has exactly one use: to associate some text with a form element. It's like pinning a day-glow Post-It note onto that textbox that says "this is where you should type your email address". That's the one acceptable use for labels. Period. The End. QED. Nothing more to say.

Ahhhhh, alack, if only that were the case.

OK, that's what a label is, but why use it?

In a word: accessibility. OK, I know, I know -- this doesn't apply to your current project, but hear me out. People with disabilities might use your site via a screen reader. A screen reader enabled browser reads the page to its users and it knows to associate labels with form elements, greatly assisting folks in completing your form.

I lost you back there, didn't I? I lost you because YOUR site is for healthy, young, vibrant folks who don't need this crutch.

Not so fast, pal. This is a clever tag that gives "accessibility" to everyone.

If we have this:

<input type="checkbox" id="subscribeChbx" />
<label for="subscribeChbx">Subscribe to newsletter</label>

By clicking the label text ("subscribe to newsletter" in the above) the focus automatically goes to its associated input field, and in this case, triggers the check/selected action of the checkbox. Whooa. Cool, eh?

Yup, that's built right into every browser! This is really great for people working on mobile/WAP sites, by the way. You get this nice huge "hit area" for free.

As if that wasn't enough, you get a new tag to attack with CSS -- the "label". Make bold labels, red labels -- all without resorting to extra, bloated markup or more classnames.

Soap Box: You Might Need to Change Your .NET Habit

To be fair: I've seen gazoodles of .NET tutorials that emphatically state that the correct way to add text to a page is with .NET's label control -- and this is worse than a lie, it's wrong. That control renders a label. If you want to add text a literal is the correct choice because (again):

A label is used only with a form input.

I'd add another one to that: every form input element deserves its own label.

Summing Up

Labels are fantastic, underused and overused all at the same time. They make forms more accessible for everyone and provide hooks for styling without additional markup. Use them freely, but correctly and everyone wins.