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

legend {  background-color: #000;  color: #fff;  padding: 3px 6px;}input {  margin: 0.4rem;}

As the example above shows, the<fieldset> element provides a grouping for a part of an HTML form, with a nested<legend> element providing a caption for the<fieldset>. It takes few attributes, the most notable of which areform, which can contain theid of a<form> on the same page, allowing you to make the<fieldset> part of that<form> even if it is not nested inside it, anddisabled, which allows you to disable the<fieldset> and all its contents in one go.

This element includes theglobal attributes.

disabled

If this Boolean attribute is set, all form controls that are descendants of the<fieldset>, are disabled, meaning they are not editable and won't be submitted along with the<form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the<legend> element won't be disabled.

form

This attribute takes the value of theid attribute of a<form> element you want the<fieldset> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the<input> elements inside the<fieldset> to be associated with the form, you need to use theform attribute directly on those elements. You can check which elements are associated with a form via JavaScript, usingHTMLFormElement.elements.

name

The name associated with the group.

Note:The caption for the fieldset is given by the first<legend> element nested inside it.

There are several special styling considerations for<fieldset>.

Itsdisplay value isblock by default, and it establishes ablock formatting context. If the<fieldset> is styled with an inline-leveldisplay value, it will behave asinline-block, otherwise it will behave asblock. By default there is a2pxgroove border surrounding the contents, and a small amount of default padding. The element hasmin-inline-size: min-content by default.

If a<legend> is present, it is placed over theblock-start border. The<legend> shrink-wraps, and also establishes a formatting context. Thedisplay value is blockified. (For example,display: inline behaves asblock.)

There will be an anonymous box holding the contents of the<fieldset>, which inherits certain properties from the<fieldset>. If the<fieldset> is styled withdisplay: grid ordisplay: inline-grid, then the anonymous box will be a grid formatting context. If the<fieldset> is styled withdisplay: flex ordisplay: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the<fieldset> and<legend> in any way you want to suit your page design.

This example includes a<fieldset> with a<legend>, with a single control inside it.

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

Result

This example shows a disabled<fieldset> with two controls inside it. Note how both the controls are disabled due to being inside a disabled<fieldset>.

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

Result

• The<legend> element
• The<input> element
• The<label> element
• The<form> element