<fieldset>

Groups related elements in a form

Quick Answer

What is the HTML <fieldset> tag?

The <fieldset> tag groups related form controls and labels, typically rendering with a border. Use <legend> as the first child to provide a caption. The disabled attribute can disable all contained inputs. This improves form accessibility, organization, and semantic structure for screen readers and users.

Definition and Usage

The <fieldset> tag is used to group related elements in a form together. It draws a box around the related form elements, helping to organize and structure complex forms.

The <fieldset> tag is often used in conjunction with the <legend> tag, which provides a caption for the <fieldset> element.

This element is particularly useful for improving form accessibility, as screen readers can use the fieldset and legend to provide context to users about grouped form fields.

Tip: Use <fieldset> to group related form controls and make your forms more accessible and easier to understand.

Note: The <legend> tag should be the first child element of the <fieldset> if used.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute	Value	Description
disabled	disabled	Specifies that a group of form elements should be disabled
form	form_id	Specifies one or more forms the fieldset belongs to
name	text	Specifies a name for the fieldset

Examples

Basic Fieldset

Simple fieldset grouping form elements:

Example
<form>
  <fieldset>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" /><br /><br />
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" />
  </fieldset>
</form>

Fieldset with Legend

Adding a caption to the fieldset using legend:

Example
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" /><br /><br />
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" /><br /><br />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
  </fieldset>
</form>

Disabled Fieldset

Disable all form controls within a fieldset:

Example
<form>
  <fieldset disabled>
    <legend>Disabled Section</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" /><br /><br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
  </fieldset>
</form>

Nested Fieldsets

Organize complex forms with nested fieldsets:

Example
<form>
  <fieldset>
    <legend>Customer Details</legend>

    <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />
    </fieldset>

    <fieldset>
      <legend>Contact Information</legend>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" /><br /><br />
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone" />
    </fieldset>
  </fieldset>
</form>

Styled Fieldsets

Custom styling for fieldsets:

Example
<style>
  fieldset {
    border: 2px solid #4CAF50;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
  }

  legend {
    background-color: #4CAF50;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
  }
</style>

<form>
  <fieldset>
    <legend>Registration Form</legend>
    <label for="uname">Username:</label>
    <input type="text" id="uname" name="username"><br><br>
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="password">
  </fieldset>
</form>

Radio Buttons Group

Grouping radio buttons with fieldset:

Example
<form>
  <fieldset>
    <legend>Choose your preferred contact method:</legend>
    <input type="radio" id="email" name="contact" value="email" />
    <label for="email">Email</label><br />
    <input type="radio" id="phone" name="contact" value="phone" />
    <label for="phone">Phone</label><br />
    <input type="radio" id="mail" name="contact" value="mail" />
    <label for="mail">Mail</label>
  </fieldset>
</form>

Form Sections

Organizing a complete form with multiple fieldsets:

Example
<form>
  <fieldset>
    <legend>Account Information</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" /><br /><br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
  </fieldset>

  <fieldset>
    <legend>Personal Details</legend>
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" /><br /><br />
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" />
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>
    <input type="checkbox" id="newsletter" name="newsletter" />
    <label for="newsletter">Subscribe to newsletter</label><br />
    <input type="checkbox" id="terms" name="terms" />
    <label for="terms">Agree to terms and conditions</label>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Fieldset Structure

The proper structure of a fieldset with legend:

Example
<fieldset>
  <!-- Legend must be first child (optional) -->
  <legend>Caption Text</legend>

  <!-- Form controls and other content -->
  <label>Label</label>
  <input type="text" />

  <!-- Can contain any form elements -->
</fieldset>

CSS Styling

Common CSS properties for styling fieldsets:

Border: Customize the border style, color, and width
Background: Add background colors or gradients
Padding: Control spacing inside the fieldset
Margin: Control spacing around the fieldset
Border-radius: Round the corners
Box-shadow: Add shadow effects

Example
/* Remove default border */
fieldset {
  border: none;
  padding: 0;
}

/* Custom styled fieldset */
fieldset {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}

/* Responsive fieldset */
@media (max-width: 768px) {
  fieldset {
    padding: 15px;
    margin: 15px 0;
  }
}

Accessibility Benefits

Screen readers announce the legend when entering the fieldset, providing context
Groups related form controls together semantically
Helps users understand the relationship between form fields
The disabled attribute affects all nested form controls at once
Improves keyboard navigation by providing logical grouping
Makes complex forms easier to understand and complete
Provides visual and semantic structure to forms

Best Practices

Always use <legend> to provide a descriptive caption for the fieldset
Place the <legend> as the first child of <fieldset>
Use fieldsets to group related form controls (radio buttons, checkboxes, etc.)
Don't over-nest fieldsets - keep structure simple and logical
Use the disabled attribute to disable entire groups of controls when needed
Style fieldsets consistently across your application
Avoid using fieldsets for purely visual grouping - use CSS instead
Keep legend text concise and descriptive
Test fieldsets with screen readers to ensure proper accessibility

Try it Yourself

Interactive Example

Example of fieldset grouping form elements:

Personal Information

First Name:

Last Name:

🚀 Try in Code Playground

Related Tags

<legend>
Defines a caption for fieldset
<form>
Defines an HTML form
<label>
Defines a label for input
<input>
Defines an input control