Path // www.yourhtmlsource.com → Reference → <fieldset>

<fieldset>

by Ross Shannon

The <fieldset> element groups related form controls together, typically with a visible border. It improves form organization and accessibility by creating logical sections within forms. When paired with a <legend> element, it provides a caption that screen readers announce, helping users understand the purpose of each group of controls.

Clock This page was last updated on 2025-11-17


Syntax

<fieldset>
  <legend>Group Caption</legend>
  <!-- form controls go here -->
</fieldset>

The element requires both opening and closing tags. The optional <legend> element, if present, must be the first child and provides the group caption. All related form controls are placed inside the fieldset.

Attributes

  • disabled - Disables all form controls within the fieldset (they cannot be edited or submitted)
  • name - Name of the fieldset for scripting purposes
  • form - Associates the fieldset with a form by its id (for fieldsets outside the form)
  • Global attributes - Supports standard attributes like id, class, style

Examples

Personal Information Section

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

Radio Button Group

<fieldset>
  <legend>Select Your Plan</legend>
  
  <input type="radio" id="basic" name="plan" value="basic">
  <label for="basic">Basic - $9/month</label>
  
  <input type="radio" id="standard" name="plan" value="standard">
  <label for="standard">Standard - $19/month</label>
  
  <input type="radio" id="premium" name="plan" value="premium">
  <label for="premium">Premium - $29/month</label>
</fieldset>

Disabled Fieldset

<fieldset disabled>
  <legend>Billing Address (same as shipping)</legend>
  
  <label for="bstreet">Street:</label>
  <input type="text" id="bstreet" name="bstreet">
  
  <label for="bcity">City:</label>
  <input type="text" id="bcity" name="bcity">
</fieldset>

When to Use

Use the <fieldset> element when:

  • Grouping related form controls (personal info, billing, preferences)
  • Creating radio button or checkbox groups
  • Organizing long forms into logical sections
  • Improving form accessibility for screen reader users
  • Providing visual separation between form sections
  • Disabling entire sections of a form conditionally

Accessibility and best practices:

  • Always include a <legend> element as the first child
  • Use descriptive legend text that explains the group's purpose
  • Essential for radio button and checkbox groups (provides group context)
  • Screen readers announce the legend when entering the fieldset
  • Keep fieldsets focused on logically related controls
  • Avoid nesting fieldsets too deeply (can be confusing)
  • Use CSS to style the default border if needed
  • The disabled attribute affects all controls inside
  • Test with screen readers to ensure proper announcement
  • <legend> - Caption for the fieldset
  • <form> - Parent form container
  • <label> - Labels for individual form controls
  • <input> - Form controls within the fieldset
  • <select> - Dropdown controls within the fieldset
  • <textarea> - Text areas within the fieldset

CSS styling example:

fieldset {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}