Do you group related fields by using FieldSet?

Last updated by Tiago Araújo [SSW] about 2 years ago.See history

FieldSet element allows you to group thematically related controls and labels. Grouping controls makes forms more accessible and easier for users to understand the purpose of filling the forms.

See the example below using "Your Details" and "Event Details".

fieldset
Figure: Good example - Use FieldSet for grouping

Here's an example of how FieldSet works:

<fieldset>
    <legend>Your Details</legend>
    <p>
        <label for="FirstName">First Name: </label>
        <input id="FirstName" type="text" /><br />
        <label for="LastName">Last Name: </label>
        <input id="LastName" type="text" /><br />
        <label for="EmailAddress">Email Address: </label>
        <input id="EmailAddress" type="text" />
    </p>
</fieldset>

Figure: Example code of FieldSet

fieldset browser
Figure: How that code will look on the browser

Things to remember:

  1. Wrap logical control groups in a <fieldset>.
  2. The first child of a <fieldset> should be a <legend>, so the user knows what to expect in that section.
We open source. Powered by GitHub