Google Blogoscoped

Thursday, April 14, 2005

Form Labels and Legends

Form labels are one of the most underused HTML elements. They're actually good usability: when you create radio buttons for a form on a website, you should also make the text accompanying the radio button clickable. While this is the default behavior for e.g. Windows applications, this approach is often ignored on the web.

Here's a sample. Click on "Visa" or "Mastercard" (or their respective radio buttons) to activate the radio button:

Your credit card:

And following is the necessary XHTML Strict code. You can additionally use the CSS selector "label:hover" to better style this for conforming browsers like Firefox.

<form ...>

<input type="radio" name="creditcard" value="Visa" id="visa" />
<label for="visa">Visa</label>
<br />
<input type="radio" name="creditcard" value="Mastercard" id="mastercard" />
<label for="mastercard">Mastercard</label>


You can also combine this approach of using the "label" element with the "fieldset" and "legend" elements for both visual as well as structural grouping:

Your credit card

The HTML for this is quite simple:

<legend>Your credit card</legend>

<!-- radio buttons... -->


More about form labels at the W3C. Also see the "optgroup" form element.


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!