I found a new HTML tag!

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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s