Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

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

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 label/title for the <fieldset>. It takes few attributes, the most notable of which are form, which can contain the id 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, and disabled, which allows you to disable the <fieldset> and all its contents in one go.

Note: The <fieldset> element is expected to establish a new block formatting context(See HTML5 spec).

Attributes

This element includes the global 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 a descendant <legend> element won't be disabled.
form HTML5
This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. If not specified, its default value is the id of the nearest <form> element it is a descendant of.
name HTML5
The name associated with the group.
Note: The label for the fieldset is given by the first <legend> element nested inside it.

Styling with CSS

There are not really any special styling considerations for <fieldset>. Its display value is block by default, and browsers generally give it a default styling of a 1px solid black border surrounding the contents, and a small amount of default padding. If a <legend> is present, it is placed over the top of the top border.

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

Note: unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for <fieldset>, and many browsers implement such styling (or something that approximates it).

Note: as of this writing, there are bugs in Microsoft Edge and Google Chrome which prevent flexbox and grid layouts from being used inside a <fieldset>This GitHub issue provides bug tracking links.

Example

Simple fieldset

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

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

Disabled fieldset

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 fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="name" id="text" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="text" value="Wookie">
    </div>
  </fieldset>
</form>

Technical summary

Content categories Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content An optional <legend> element, followed by flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles group, presentation
DOM interface HTMLFieldSetElement

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<fieldset>' in that specification.
Living Standard Definition of the fieldset element
HTML5
The definition of '<fieldset>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<fieldset>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
disabled Yes Yes Yes Yes1126
form Yes Yes Yes Yes Yes Yes
name Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes
disabled4.4 Yes Yes ? ?6 Yes
form Yes Yes Yes Yes Yes Yes Yes
name Yes Yes Yes Yes Yes Yes Yes

1. Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].

See also