Every time I have a checkbox or radio button to click on a webpage I almost always immediately notice something that makes me wonder about the person who wrote the page – a missing or incorrectly used LABEL tag. What would you rather click to toggle a checkbox or select a radio button?
This: 
Or this: 
More is better, right? It's also consistent with the behavior in the OS, which is important. There really isn't any excuse for not using a label tag, but you still see it missing on many sites that should know better. Take a look at the live.com search settings page. There are only two labels used, Display this site in: and Current Location: and neither of those are visually recognizable as a label. It just takes a tiny bit of extra code and your users will thank you for it.
<label for="spellcheck">Check Spelling</label> <input name="spellcheck" id="spellcheck" type="checkbox" /> |
Once you've mastered the challenge that is basic HTML, you're ready to move on to something a bit more sophisticated (and much more cool) like tableless forms.
August 6th, 2007 at 3:05 am
Don't forget to mention that label tags also work without the for attribute – just enclose the input element within the label element too. Especially handy for checkboxes.
August 6th, 2007 at 7:35 am
Unfortunately IE6 and older don't support implicit association (wrapping the element in the label tag). At least IE tries; Safari doesn't support implicit OR explicit association.
Some resources:
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
http://www.trovster.com/form-label.php