HTML <fieldset> Element

The <fieldset> element groups related controls and labels within an HTML form. It is commonly used with the <legend> element, which provides a caption that describes the purpose of the grouped form controls.

Syntax

<fieldset>
  <legend>Basic Info</legend>

  <label for="first-name">First Name:</label>
  <input type="text" id="first-name" name="first-name">

  <label for="last-name">Last Name:</label>
  <input type="text" id="last-name" name="last-name">
</fieldset>

The <fieldset> surrounds a group of related form controls, while the optional <legend> provides a caption for the group.

Attributes

The <fieldset> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`disabled`	Disables the form controls contained within the fieldset, with an exception for controls contained within its `<legend>`.
`form`	Associates the fieldset with a `<form>` element by referencing the form's `id`.
`name`	Specifies a name for the fieldset.

Example

The following example uses a <fieldset> to group related contact information and a <legend> to identify the group. Submit the form to see how the entered values are sent to the server and returned on the result page:

Play in Editor

Usage Notes

Use <fieldset> when several form controls belong to the same logical group, such as contact information, shipping details, account settings, or a group of related choices.

The <legend> element should normally be the first child of the <fieldset>. It provides a caption that explains what the grouped controls have in common.

Adding the disabled attribute to a <fieldset> disables its descendant form controls, except those within the fieldset's first <legend> element. Disabled controls generally cannot be edited and are not submitted with the form.

The form attribute can associate a <fieldset> with a form elsewhere in the document by matching the value of the attribute to the form's id.

Browsers commonly display a border around a <fieldset>, but the element should be used because the controls form a meaningful group rather than simply to create a visual border.

Accessibility

Grouping related controls with <fieldset> and providing a descriptive <legend> can make complex forms easier to understand, particularly when several controls share the same question or purpose.

This structure is especially useful for related radio buttons and checkboxes because the legend can provide the common question or instruction while each individual control retains its own label.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <fieldset> Element .

<form> - Represents a form containing controls for collecting and submitting information.

<legend> - Provides a caption for the contents of a <fieldset>.

<label> - Provides a descriptive label for an individual form control.

<input> - Creates many common types of form controls.

Specifications

HTML Living Standard: The <fieldset> Element

HTML <fieldset> Element