How to use HTML Label Tag

One of our readers who enjoys the stuff.co.nz "Opinion Polls", pointing out there's one thing that he find inconsistent - the HTML we are using to provide the poll options does not use the LABEL tag. This is a useful tag that allows a user to click on the text associated with a radio button, with the same effect as if they had clicked on the actual button itself.

First of all, I should say thank you to this user, he is awesome.

It's a usability issue, I actually noticed this issue the other day. But I thought like 99% users would click on the radio button or check box rather than the text, so I didn't bring up this issue. This is something minor but we should do to keep Stuff.co.nz a cutting edge website impression for our users.

Now, I want to detail the mystery of label tag

the label tag does not actually help with the layout or structure of a web page - it helps with usability. For instance, do you notice any difference between the two examples below:

Check Me!!

Check Me Too!!

The first example there is using the label tag, and the second example does not. If you paid attention when you checked/unchecked the checkboxes, you may have noticed the difference. In the first example, you can click the text, and the checkbox reacts! That's right, the label tag allows you to create a "label" for an input element. Take a look at the code for the example:

<input type="checkbox" id="example1" />
<label for="example1"> Check Me!!</label>
<br/>
<input type="checkbox" id="example2" />
<span> Check Me Too!!</span>

Using the <label> tag works for most types of input element, as you can see below:

A Button

A Checkbox

A Radio Button

A Text Box

A Password Box

<input type="button" id="example3" value="Button" />
<label for="example3"> A Button</label>
<br/>
<input type="checkbox" id="example4" />
<label for="example4"> A Checkbox</label>
<br/>
<input type="radio" id="example5" />
<label for="example5"> A Radio Button</label>
<br/>
<input type="text" id="example6" />
<label for="example6"> A Text Box</label>
<br/>
<input type="password" id="example7" />
<label for="example7"> A Password Box</label>

You would be surprised how much more usable the <label> tag can make your forms. The checkbox is a really easy example - pull open any Windows or Mac application - the label for a checkbox will almost always trigger the checkbox as well. This is because the checkbox is generally a small hit target - it is easy for the user to miss clicking it. With Windows/Mac apps, developers get that behavior for free - on web pages, we have to remember to code it in. So next time you are building a web form, remember to use the <label> tag!