HTML <fieldset> Tag

The <fieldset> tag is used to group related elements in an HTML form. It visually and semantically groups form controls together, making forms easier to understand and navigate. This improves both the user experience and accessibility, especially for users who rely on assistive technologies.

Syntax

<fieldset disabled="disabled" form="form_id" name="fieldset_name">
    <legend>Legend text</legend>
  <!-- Form controls here -->
</fieldset>

Attributes

Example

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

More Examples

Basic Fieldset Grouping

This example demonstrates how to group personal details with a clear legend:

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label for="phone">Phone:</label><br>
        <input type="tel" id="phone" name="phone"><br><br>
        <label for="address">Address:</label><br>
        <textarea id="address" name="address"></textarea>
    </fieldset>
</form>

Disabled Fieldset

Here’s how to use the disabled attribute to prevent users from interacting with the form controls:

<form>
    <fieldset disabled>
        <legend>Payment Information</legend>
         <label for="card">Card Number:</label>
         <input type="text" id="card" name="card"><br><br>
         <label for="cvv">CVV:</label>
         <input type="text" id="cvv" name="cvv">
    </fieldset>
    <button type="submit">Submit</button>
</form>

Fieldset with form attribute

This is useful if you have a fieldset outside of a form but still want to associate it with a particular form:

<form id="mainForm">
    <!--Other form elements-->
</form>
<fieldset form="mainForm">
    <legend>Additional Info</legend>
    <label for="notes">Notes:</label>
    <textarea id="notes" name="notes"></textarea>
</fieldset>

Complex Example: Multiple Fieldsets

Forms can include multiple fieldsets for better organization. This example shows how to group user registration details:

<form>
  <fieldset>
      <legend>Account Details</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"><br><br>
    </fieldset>

    <fieldset>
      <legend>Profile Details</legend>
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
    </fieldset>
   <button type="submit">Register</button>
</form>

Browser Support

The <fieldset> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <legend> tag is crucial for accessibility. It provides a caption for the fieldset, making it easier for users to understand the purpose of the grouped controls.
• Using multiple <fieldset> tags can help break large forms into more manageable sections, improving user experience.
• The disabled attribute can be dynamically toggled using JavaScript to enable/disable form sections based on user interactions or conditions.
• Don’t nest <fieldset> tags inside each other; this is generally bad practice and leads to poor accessibility and layout issues.
• Always include a <legend> element within a <fieldset> element for the best accessibility experience. A fieldset without legend is not accessible for screen readers, causing difficulties for users.
• When styling fieldsets, be mindful of borders and spacing. Consistent formatting helps in presenting a clear, logical structure to the user.