HTML <Fieldset> Tag

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>

  Try it Yourself

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

  Try it Yourself

• name

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

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile