Late last year, a co-worker asked me why we weren’t using the <label> HTML form tag. I wasn’t sure, but it’s my job to know things like that. A little research revealed the answer: because I suck. From that point on, we’ve used the label tag wherever appropriate (some historical work hasn’t yet been updated, but it will be eventually).
If you ever find yourself writing (x)HTML forms, you should always use the label tag. In case you aren’t familiar with it (I thought I knew all there was to know about HTML, and I hadn’t even heard of it), here’s an example (try clicking on the text labels):
<form>
<div><input type=”radio” name=”options” id=”option1″ />
<label for=”option1″>Apples</label></div>
<div><input type=”radio” name=”options” id=”option2″ />
<label for=”option2″>Oranges</label></div>
<div><input type=”radio” name=”options” id=”option3″ />
<label for=”option3″>Papaya</label></div>
</form>
The label and corresponding input don’t have to be adjacent – they are associated with the for/id attributes. The label is then clickable just like the control and the browser does all the work for you – no messy JavaScript required.
It works in most every browser on the planet and the few that don’t support it (Safari being the most notable) ignore it gracefully. There are accessibility benefits and we all get clickable form labels that mirror the functionality of most operating system controls.
This tag has been around forever and smarter people than myself have been urging us all to use it for a long time. Since I was so late to the game, I thought I’d share, in case others like myself weren’t in the know.
