fieldset Element

Module

The fieldset element is a block-level element declared by the XHTML 1.1 Forms Module but is not present in the *W3C XHTML 1.1 Basic Forms Module

Elements in the Forms Module are:
form | label | textarea | select | optgroup | option | button | fieldset | legend |
input type="button" | input type="checkbox" | input type="file" | input type="hidden" | input type="image" | input type="password" | input type="radio" | input type="reset" | input type="submit" | input type="text"

Description

The fieldset element is used to group related form controls within a form. It is usually used in combination with the legend element, which acts as a heading for the fieldset. Fieldsets may be nested, if required.

<form action="" method="post">
<fieldset>
  <legend>About You:</legend>
  <label for="name">Name</label>
  <input type="text" id="name"  name="name"  /><br />
  <label for="email">Email Address</label>
  <input type="text" id="email" name="email" /><br />
</fieldset>
<fieldset>
  <legend>About Your Dog:</legend>
  <label for="dname">Name</label>
  <input type="text" id="dname" name="dname" /><br />
  <label for="breed">Breed</label>
  <input type="text" id="breed" name="breed" /><br />
  <label for="age">Age</label>
  <input type="text" id="age"   name="age"   /><br />
</fieldset>
<div><input type="submit" value="Submit Details" /></div>
</form>

No styles have been applied to the fieldset or legend elements above, so they are displayed using your browser's default styles. Default behaviour is commonly to put a border around the fieldset, with any legend inserted into the border (breaking it) at the top left. Of course, CSS may be used to control appearance in graphical user agents. Note that the input type="submit" element is enclosed within a div because all children of form elements must be block-level elements.

Note: Bear in mind that some screen readers may read out the contents of the legend element prior to each label within a fieldset, so legends should be short and make sense when read out before each and every label within the fieldset.

A fieldset element is also very useful for attaching (via a child legend element) a semantically-significant label to a set of radio buttons (see input type="radio") or checkboxes (see input type="checkbox").

#REQUIRED Attributes

There are no #REQUIRED attributes on the fieldset element.

Specific Attributes

There are no specific attributes declared on the fieldset element.

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

( #PCDATA | legend | Flow.mix )*

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of fieldset

• #PCDATA
• From the Text Module: abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1 - h6, kbd, p, pre, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dl, ol, ul
• From the Tables Module: table
• From the Forms Module: button, fieldset, form, input, label, legend, select, textarea
• From the Images Module: img
• From the Presentation Module: b, big, hr, i, small, sub, sup, tt
• From the Client-side Image Map Module: map
• From the Scripting Module: noscript, script
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: ruby

Valid parents of fieldset

• From the Structure Module: body
• From the Text Module: blockquote, div
• From the List Module: dd, li
• From the Tables Module: td, th
• From the Forms Module: fieldset, form
• From the Client-side Image Map Module: map
• From the Scripting Module: noscript
• From the Edit Module: del, ins
• From the Object Module: object