HTML & CSS
Article
By Adam Roberts

fieldset (HTML element)

By Adam Roberts
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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

fieldset-legend
It’s also possible to nest fieldsets as a means to subgroup items, as shown here:

markup-maker-nested-fieldset

--ADVERTISEMENT--

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>

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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?