<fieldset>: the "Field set" element

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

Attributes

disabled

If this boolean attribute is set, all form controls that are descendants of <fieldset>, are disabled, meaning they are not editable and will not be sent along with <form>. They will not receive any navigation events, such as mouse clicks or focus events. By default, browsers display these controls grayed out. Note that form elements inside the <legend> element will not be disabled.

form

This attribute takes the attribute id value of a <form> element that you want the <fieldset> to be part of, even if it is not inside the form. Note that using this is confusing: if you want the <input> elements within the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements. You can control which elements are associated with a form via JavaScript, using HTMLFormElement.elements.

name

The name associated with the group.

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

Stylize with CSS

There are several special style considerations for <fieldset>.

Its default display value is block and establishes a block formatting context. If <fieldset> has a display style with an inline-level value, it will behave as an inline-block, otherwise it will behave as a block. By default there is a 2px groove border surrounding the content and a small amount of default padding. The element defaults to min-inline-size: min-content.

There will be an anonymous box containing the contents of the <fieldset>, which inherits some properties from the <fieldset>. If <fieldset> is styled with display: grid or display: inline-grid, the anonymous box will be a grid formatting context. If the style of <fieldset> is with display: flex or display: inline-flex, the anonymous box will be a flexible formatting context. Otherwise, it establishes a formatting context for the block.

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

Examples

Simple field

This example shows a very simple example of a <fieldset>, with a <legend>, and a single control inside it.

<form action="#">
  <fieldset>
    <legend>Un semplice fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Pulsante radio </label>
</form>

Fieldset disabled

This example shows a disabled <fieldset> with two controls in it. Notice how both controls are disabled because they are inside a disabled <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Un fieldset disabilitato</legend>
    <div>
      <label for="nome">Nome:</ label>
      <input type="text" id="nome" value="Chris">
    </div> 
    <div>
    <label for="pwd">Password:</ label>
      <input type="text" id="pwd" value="Wookie"> 
    </div> 
  </fieldset>
</form>