🤩 Access a heap of free courses with a SitePoint account

fieldset (HTML element)

    Adam Roberts
    Share

    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

    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.