Al’s Blog

Well it’s not everyday it happens is it? There I was reading Jakob Neilsons’ article on Radiobuttons and checkboxes and I happened across the <label> HTML tag. Okay, so its only part of the HTML4 recommendation but it appears to work in Firefox and IE.

It basically lets you increase the target size of your radiobutton (which, as i’ve just read is called Fitts’s law) by making the text alongside the radiobutton linkable. This, i’ve achieved previously with a span tag. D’oh.

Sample form below. You’ll see that clicking on the “first name” takes you into the edit box for the first name, and clicking male/female chooses that radiobutton. Neat.

First name:
Last name:
email:
Male
Female

And here’s the HTML for that…

<p>
<label for="firstname">First name: </label> <input id="firstname" type="text">
<label for="lastname">Last name: </label> <input id="lastname" type="text">
<label for="email">email: </label> <input id="email" type="text">
<input name="sex" value="Male" id="male" type="radio"> <label for="male">Male</label>
<input name="sex" value="Female" id="female" type="radio"> <label for="female">Female</label>
</p>