Label tag

Alright everyone, take your seats. Today I am going to rant about teach everyone the label tag. It’s a very simple tag. <label> Any questions? Just keep reading…

How many of you use checkboxes, radio buttons, text boxes… hell, ANY form element really in your every day web development.

Right, that should be almost all of you.

Yet, as I browse around the internet, a sad majority of sites have failed to use this tag, forcing me to train my mouse oh so carefully on a 8×8 block of pixels to make some kind of selection. There is simply no excuse for this.

I will admit to a time when I was similarly ignorant of this tag, and I hate to admit that it was ASP.Net of all things that brought it to my attention. You see, when you make a Checkbox control in .Net it automatically ties the text that is associated to the checkbox to the checkbox itself, so that when you click the text, you change the state of the checkbox…

how you ask? That’s right boys and girls, the <label> tag.

So, let’s take a look and see what this thing is really doing.

First, a checkbox WITHOUT the <label> tag. (you know… how you normally do things)

A sad checkbox with no friends

… and now…

A checkbox with a clickable friend

Try clicking around above…

Done?

Notice the difference. Isn’t that SOOO Much nicer? Much easier to change the state of the checkbox isn’t it?

So, let’s examine the code for the second checkbox and break it down.

<input type="checkbox" name="checkbox_friends" id="checkbox_friends"> 
<label id="label_friend" for="checkbox_friends">A checkbox with a friend</label>

The input tag should be familiar to you all and there is nothing special about it, so I’ll start with the tag. FOR. Give that the ID of a control that you want to tie the label to.

Done.

Simple. Clean. Efficient. Oh, and not to mention, standards compliant, screen reader compliant, handicap accessible, etc, etc.