Skip to: content, navigation

by Ian Lloyd

fieldset (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full

Example

This fieldset element is used to group three related XFN attributes (see the Microformats section regarding XFN):

<form>
  <fieldset>
      <legend>Friendship</legend>
      <input type="radio" name="radFriendship" value="Not_Applicable"
          id="radFriendNot_Applicable"/>
      <label for="radFriendNot_Applicable">Not_Applicable</label>
      <input type="radio" name="radFriendship" value="acquaintance"
          id="radFriendaquaintence"/>
      <label for="radFriendaquaintence">acquaintance</label>
      <input type="radio" name="radFriendship" value="friend"
          id="radFriendfriend"/>
     <label for="radFriendfriend">friend</label>
  </fieldset>
⋮
</form>
Type
block-level element
Contains
block-level elements, inline elements
Contained by
applet, blockquote, body, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th

Description

The fieldset is a useful tool for organizing and grouping related items within a form, and has been used for a long time in desktop applications. When it’s combined with the legend (which is contained inside the fieldset, and is a required element if you use the fieldset), it has the effect of creating a box around the grouped items and showing a description to the right of each item, as shown in Figure 1.

Figure 1. A fieldset with the legend of “Friendship” grouping related items in a form A fieldset with the legend of ‘friendship’ grouping related items in the form

It’s also possible to nest fieldsets as a means to subgroup items, as shown in Figure 2.

Figure 2. Nested fieldsets, as shown on Accessify.com’s Markup Maker tool Nested fieldsets, as shown on Accessify’s Markup Maker tool

Use This For …

The fieldset attribute is used to logically group data items that share some characteristics. For example, you may wrap a fieldset around personal details, and another around work details, when capturing information about a visitor in an application form.

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

It causes no compatibility issues, and has excellent support across all tested browsers.

Related Reading

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters