Home
Do you group related fields by using FieldSet?
  v3.0 Posted at 23/12/2014 1:29 AM by Tiago Araujo

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

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

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: