<fieldset>

The HTML <fieldset> element is used to group related form controls and labels, enhancing organization and accessibility by visually enclosing a set of controls.

`<fieldset>` Tag

The <fieldset> element groups multiple controls and their associated labels within a web form.

Syntax

index.html

<fieldset>
  <legend>Legend Text</legend>
  <!-- Form elements go here -->
</fieldset>

`<fieldset>` Demo

index.html

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>
    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />
    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />
    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

The <fieldset> element automatically draws a box around its content.

Attributes

The <fieldset> element groups related form controls and labels.

`disabled`

When this Boolean attribute is set, all descendant form controls within the <fieldset> are disabled, making them non-editable and excluding them from submission.

`<form>`

This attribute specifies the ID of a <form> element, allowing the <fieldset> to be associated with that form, even if it’s not nested inside it.

Examples

Simple Fieldset
Disabled Fieldset

Simple Fieldset

This example features a basic <fieldset> with a <legend> and a single control inside.

index.html

<form>
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

Disabled Fieldset

This example illustrates a disabled <fieldset> containing two controls. Both controls are disabled because they are nested within the disabled <fieldset>.

index.html

<form>
  <fieldset disabled>
    <legend>Disabled login fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>

The <fieldset> element in HTML is used to group related form controls and their associated labels, typically creating a box around the grouped content for better organization and clarity. Additionally, the <legend> element within the <fieldset> provides a label for the group of controls.

The HTML <dialog> element creates a dialog box or popup, offering a consistent method for implementing interactive modal or non-modal windows with built-in opening and closing functionality.

<form>

The HTML <form> element contains various input controls and elements, enabling users to submit data to a server for processing via buttons, fields, and other interactive components.