← Back to All Tags

<fieldset>

Groups related elements in a form

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

The <fieldset> tag is supported in all browsers:

Chrome
Chrome
All versions
Firefox
Firefox
All versions
Safari
Safari
All versions
Edge
Edge
All versions
Opera
Opera
All versions

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

Related Tags