Usability Feature - The Label Element

Some form controls automatically have labels associated with them.

[pageoneresults]

Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus). For those controls that have implicit labels, user agents should use the value of the value attribute as the label string. The LABEL element is used to specify labels for controls that do not have implicit labels.

References

• 17.9 Labels [w3.org]

This is an excellent usability feature for visitors to your forms. Using the label element allows the user to click on the text associated with the form control instead of having to click the radio button, check box, select box, etc.

In interface design they call it improved targeting, and it can help reduce the risk of repetitive stress injuries (RSI).
tedster 2004-01-25

Code Example

One label element and one ID per form control.

<input name="action" type="radio" value="title" [b]id="name"[/b]> [b]<label for="name">[/b]Form control text.[b]</label>[/b]

Code Bloat

27 additional bytes (+ ID Name and Label Name) to add a noticeable usability function. Very minimal html code required for this feature.

[tedster]

My name is tedster, and I authorized that message ;)

I love to add touches like that to my pages. Anything that means the user can take action without need to hit an extremely small target area helps keep tension out of the forearm and wrist area.

[txbakers]

need to hit an extremely small target area

On most web forms there isn't a real need for the mouse anyway.

The tab key will take a user to a check box, and a press of the space bar will check or uncheck the box. Same with radio buttons. The up or down arrows will toggle between a set of radio buttons and again the space bar will select one.

Drop down boxes as well. Tab to the element and the arrow keys will scroll through the list, and typing the first letter of an option will jump to the first option with that letter. (Think of state lists, entering a "T" will jump to Tennessee.)

We wrote a program that used a barcode scanner on a webform, and the user didn't even need the keyboard or mouse.

One scan of a rating sheet brought up the information for that registrant, and set the cursor to the rating text box. The user had a pre-printed list of scores in barcode, and just scanned the score, which automatically submitted the form as well.

[tedster]

on most web forms there isn't a real need for the mouse anyway

Right, but different users have different habitual ways of interacting with a web page - and different levels of knowledge. You should watch my Mom -- it's the mouse or nothing, most of the time.

[grahamstewart]

Its also worth noting that code bloat can be kept to a minimum by associating label with the control implicitly like this:

Code Example

<label><input name="action" type="radio" value="title">Form control text.</label>

Code Bloat
15 bytes.

[pageoneresults]

Its also worth noting that code bloat can be kept to a minimum by associating label with the control implicitly like this.

Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell.

Since most are probably using form controls within tables, the initial method I posted would be correct.

As grahamstewart points out...

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

[pageoneresults]

Update...

Cross Browser Compatibility

The implicit method of associating a label with a form control is not supported by Internet Explorer (Tested IE6/Win98). IE does support the

<label for="name">

method of associating labels as shown above.

I was just testing this out on a page and thought I was doing something wrong. I then opened up Opera and Mozilla and both support the implicit method, it performed as expected.

[dcrombie]

Labels aren't supported (yet) by Safari or Opera on Mac. The explicit example works in Netscape and Explorer.

[grahamstewart]

The implicit method of associating a label with a form control is not supported by Internet Explorer (Tested IE6/Win98)

Grrrrr...... frickin Internet Explorer! It really is the new Netscape 4
Oh well.. off to add a few "for" attributes.

[pageoneresults]

Grrrrr...... frickin Internet Explorer! It really is the new Netscape 4. Oh well.. off to add a few "for" attributes.

lol! Always test in IE first, then the other browsers. But, you knew that already. ;)

[grahamstewart]

Yep. I always test in IE, but this was is an easy one to miss since the form looks correct and will work: you just can't click on the label text to activate the radio button.

Since I dont tend to do this myself I missed it. Rats. :(

Incidentally do you need a 'name' attribute and an 'id' attribute on the <input>?
And if so can they be set to the same thing?

[pageoneresults]

Incidentally do you need a 'name' attribute and an 'id' attribute on the <input>? And if so can they be set to the same thing?

No, you need the ID attribute on the input to associate it with the label. Yes, you can have a name and id that are the same.

[Birdman]

Thanks for starting this thread. I've been using the <label> element incorrectly too.

Since I dont tend to do this myself I missed it.

I love being able to click the text on radio buttons. I can hit the button with no prob but it is harder.