HTML <fieldset> Tag

What You’ll Learn

By the end of this tutorial, you’ll group related form controls with semantic, accessible fieldsets.

In web forms, the <fieldset> tag plays a pivotal role in structuring and organizing form elements. This guide covers syntax, attributes, accessibility, and best practices for beginners and web developers alike.

What Is the <fieldset> Tag?

The fieldset element (<fieldset>) is a container designed explicitly for grouping and structuring form-related elements. It is often paired with <legend> to provide a caption or title for the enclosed controls.

Browsers render a visible border around fieldsets by default. You can customize or remove it with CSS while keeping the semantic grouping for accessibility.

📝 Syntax

Use opening and closing <fieldset> tags. Place a <legend> first, then your form controls:

<fieldset>
  <legend>Your Caption Here</legend>
  <!-- Your form elements go here -->
</fieldset>

Syntax Rules

• Place <legend> as the first child of fieldset.
• Group only related form controls inside one fieldset.
• Use nested fieldsets sparingly—keep form structure flat when possible.
• The disabled attribute on fieldset disables all nested controls.

⚖️ <fieldset> vs <div>

Both can wrap form fields visually, but only fieldset carries semantic meaning:

⚖️ <fieldset> and <legend>

These elements work together as a labeled form group:

Examples Gallery

Personal information, contact details, and disabled fieldset patterns with copy-ready code and live previews.

<fieldset>
  <legend>Personal Information</legend>

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

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

<fieldset>
  <legend>Contact Information</legend>

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

<fieldset class="form-group" disabled>
  <legend>Disabled Fieldset</legend>

  <label for="company">Company</label>
  <input type="text" id="company" name="company">
</fieldset>

♿ Accessibility

Semantic form grouping helps all users complete forms:

• Always include legend — screen readers announce the group name when focus enters the fieldset.
• Group related controls only — do not mix unrelated fields in one fieldset.
• Use disabled on fieldset — disables the whole group consistently for assistive tech.
• Pair labels with inputs — every control inside the fieldset still needs its own label.

💡 Best Practices