HTML <fieldset> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <fieldset> tag is used to group a set of form controls and labels within an HTML form, optionally grouped under a common name (legend).

Example

<form>
  <fieldset>
    <legend>What is your favorite programming language</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="golang" name="language">
    <label for="golang">Golang</label>
  </fieldset>
</form>

Usage

The group’s name can be specified by adding a nested <legend> element. If more than one <legend> is added, the <fieldset> will use the first one.

  • <fieldset> elements can be nested within each other.
  • A <fieldset> element is disabled if the disabled attribute is present, or it is a descendant of a disabled <fieldset>.

Attributes

The <fieldset> element supports the Global Attributes, as well as the following:

  • disabled

    The disabled attribute is a Boolean value that causes all the form control descendants to be disabled. Any controls within a disabled <fieldset> will not be editable, and no contents will be submitted with the rest of the form. Browsers will display disabled elements grayed out by default.

    <form>
      <fieldset disabled>
        <legend>What is your favorite programming language</legend>
    
        <input type="radio" id="javascript" name="language">
        <label for="javascript">JavaScript</label><br/>
    
        <input type="radio" id="python" name="language">
        <label for="python">Python</label><br/>
    
        <input type="radio" id="golang" name="language">
        <label for="golang">Golang</label>
      </fieldset>
    </form>

  • form

    The form attribute associates the controls within the <fieldset> with a <form> element. It takes the value of the id attribute of the form.

    <form id="favorite">
      <p>What is your What is your favorite programming language resource?</p>
    </form>
    
    <fieldset form="favorite" name="javascript">
      <legend>JavaScript:</legend> 
        <label for="javascripttitle">Title</label> <input id="javascripttitle"  type="text"> 
        <br> 
        <label for="javascripturl">URL</label> <input id="javascripturl" type="text">
    </fieldset>
    <fieldset form="favorite" name="python">
      <legend>Python:</legend> 
        <label for="pythontitle">Title</label> <input id="pythontitle" type="text"> 
        <br> 
        <label for="pythonurl">URL</label> <input id="pythonurl" type="text">
    </fieldset>

  • name

    The name attribute specifies a name associated with the group of controls.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes