Use the fieldset and legend elements to group HTML form controls

The fieldset and legend elements, which should always be used together, allow you to create and name groups of related input fields in HTML forms. By doing this you help users understand how the input fields are related.

How the grouping is conveyed to the user depends mainly on whether the user is sighted or not. Most graphical web browsers draw a border around fieldset elements and render the legend element on top of the border, while screen readers may speak the legend text at the start of each fieldset or before each form control within a fieldset.

Since some screen readers will announce the legend text before each form control, it is important to keep the legend text concise and consider how the legend and label texts will work when put together.

Here is a simple example of a fieldset element used to group related radio buttons:

  1. <fieldset>
  2. <legend>Favourite colour</legend>
  3. <input type="radio" name="fav-col" id="fav-col-1" value="red">
  4. <label for="fav-col-1">Red</label>
  5. <input type="radio" name="fav-col" id="fav-col-2" value="green">
  6. <label for="fav-col-2">Green</label>
  7. <input type="radio" name="fav-col" id="fav-col-3" value="blue">
  8. <label for="fav-col-3">Blue</label>
  9. </fieldset>

In summary: Do not use the fieldset and legend elements if all you want to do is create a graphical border around some content on a page. Only use them to group logically related form controls, always use both elements together, and keep legend texts short.

Further reading:

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on April 30, 2009 in (X)HTML, Accessibility, Quick Tips

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.