Label element secret powers

In web forms, label element plays an important role. It describes the corresponding form field, whether it’s a text field, radio button, checkbox or a drop-down. The label is an essential interface element for challenged people.

If labels are properly set, user agents attach a behavior: when a label is clicked with a mouse — in most browsers — the related field gains focus. The behavior is quite useful, since it gives you possibilities to increase hit area for a field.

Gaining field focus works much like tabbing with a keyboard, but there are exceptions. When a form button (for example Submit) gains focus via keyboard navigation, naturally it is selected and ready to be stroked by Enter. But, if there’s a label assigned to it, hitting the label will also submit the form automatically.

There is many possibilities. One of them is hiding form button with CSS and style label more freely, since it is a plain inline element. Design/CSS-wise, think of it like a span but with an extra behavior built in.

<label for="send"
	style="background-image: url(send-button.gif);">
	<input type="submit" id="send" value="Send"
		style="position: absolute; left: -9999px;" />	
</label>

You can nest fields inside labels and increase hit area, which many people do by default with checkboxes and radio buttons.

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Another interesting application is adding multiple labels for the same field — for instance, one right next to checkbox, and another one in a supporting paragraph where you can contextually anchor keywords directly to that checkbox.

<p>If you are absolutely sure, then
	<label for="sure">confirm it</label> in the form.</p>

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Last, but not least, labels provide valuable connection between two elements, which gives you opportunity for a unique interface designs.