Label Your Fields!

I recently needed to download a trial version of MS Office 2007. Microsoft made me fill out a bunch of forms in order to do so. This wouldn't have been that bad except that they apparently have never heard of the "label" tag.

Not exactly new, the label element has been around since the introduction of HTML 4 (so from at least 1999). Despite its antiquity and usefulness, it still doesn't seem to get much use.

By way of review, the label element associates some text as the label for a form element. This is useful for assistive technology, but also for everyone else.

If you click on the text in a label associated with a text field, it will automatically give that form field focus. More useful, however, is its effect on checkboxes and radio buttons.

Compare a checkbox without a label: 

Check this box

to one with a label: 

Check this box

Notice that they both look the same, but the second one allows you to use the text as part of the checkbox itself, making it far easier to use. This takes advantage of Fitt's Law: The time to acquire a target is a function of the distance to and size of the target (source - also see Wikipedia's entry on Fitt's law).

Using label elements is easy to do and makes form fields easier to use for everyone. If you aren't using them already (and I am always surprised by how little they are used), best start today.