I simply cannot stress enough that you. must. use. the. <label>. tag. when. creating. forms. ARGH! What brings this up for me today was a Digg link to a website entitled ObscureTags.com. The site is really quite funny, I’ll admit, but it’s always frustrating to discover that more web developers are not aware of <label>.
Why, you may ask, is <label> so important? Well, young grasshopper, I would say, the answer is quite simple (admittedly, for me to call anyone “young” would require them to be, like, nine years old). There are two reasons. First, if you’re using a Windows or Mac application, you expect that clicking on the label next to a checkbox or radiobutton will select that item. So, you’re getting a consistency win. Second, it enhances the usability of your form. By making the clickable region for your control expand from a dinky, little 6x6 pixel target to a 6x6 pixel target + a big-ass chunk of text, your users will have a much easier time hitting the necessary location to select said control. It’s all about Fitts’ Law. But isn’t everything?
As an aside, I abandoned Safari on Mac OS X and moved to Camino (which is awesome, btw) because Safari in Tiger lacks support for the <label> tag. Unfortunately, it’s not really clear whether this is getting fixed in the next release.
Old tags never die. They just go to Hell and regroup…This page contains absolutely no CSS because CSS is dumb.