HTML5 <fieldset> Tag

The HTML <fieldset> tag is used to group several controls as well as labels (<label>) within a web form.

The only content permitted inside this element is an optional <legend> element, followed by flow content. Both the starting and ending tag are mandatory for this element. The parent of the <fieldset> tag can be any element that accepts flow content.

Unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for <fieldset>, and many browsers implement such styling (or something that approximates it).

The following style is applied to this element by default:

fieldset {
  display: block;
  margin-start: 2px;
  margin-end: 2px;
  padding-before: 0.35em;
  padding-start: 0.75em;
  padding-end: 0.75em;
  padding-after: 0.625em;
  border: 2px groove (internal value);
}

Here is an example of using this tag:

<fieldset>
  <legend>Display</legend>
  <p><label>
    <input type=radio name=c value=0 checked> 
    Black on White</label></p>
  <p><label>
    <input type=radio name=c value=1> 
    White on Black</label></p>
  <p><label>
    <input type=checkbox name=g> 
    Use grayscale</label></p>
</fieldset>

Attributes

disabled (HTML5)

If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional <legend> element, are disabled, i.e., not editable. They won’t be receiving any browsing events, like mouse clicks or focus-related ones. Such controls are often grayed out by Browsers.

form (HTML5)

This attribute has the value of the id attribute of the <form> element it’s related to. Its default value is the id of the nearest <form> element it is a descendant of.

name (HTML5)

The attribute is used to specify the name associated with the group. The label for the field set is given by the first <legend> element that is a child of this field set.

Examples

See the Pen HTML fieldset Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <fieldset> element on MDN.
  2. You can also read the HTML <fieldset> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top