Form Labels and Legends

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:

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 ...>

<p>



<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>




</p>

</form>

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:

The HTML for this is quite simple:

<fieldset>

    <legend>Your credit card</legend>



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



</fieldset>

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

Form Labels and Legends by Philipp Lenssen | Comments (3)

>> More posts

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

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