HTML <fieldset> Element

Publish in HTML Tutorial el 23/05/2025 23:07

The <fieldset> element is used to group related form controls together, creating a visual and semantic connection between them. It's particularly useful for long forms that need to be organized into logical sections. When combined with the <legend> element, it provides a visible caption for the grouped elements.

Key features of <fieldset>:

Creates a box around grouped form elements
Improves form accessibility by providing context
Can be styled with CSS for better visual presentation
Works well with screen readers when properly labeled
Can be disabled to disable all contained form controls

Basic Syntax

Examples of <fieldset> Usage

Example 1: Basic Fieldset with Legend

This shows the most fundamental usage of fieldset with a legend.

Play Code

<fieldset>
  <legend>Login Details</legend>
  <label>Username: <input type="text"></label><br>
  <label>Password: <input type="password"></label>
</fieldset>

Example 2: Styled Fieldset

This example demonstrates how to style a fieldset with CSS.

Play Code

<fieldset style="border: 2px solid #4CAF50; border-radius: 5px; padding: 15px;">
  <legend style="color: #4CAF50; font-weight: bold; padding: 0 10px;">Shipping Information</legend>
  <label>Address: <input type="text" style="width: 100%;"></label><br><br>
  <label>City: <input type="text"></label>
</fieldset>

Example 3: Disabled Fieldset

Shows how to disable all controls within a fieldset by disabling the fieldset itself.

Play Code

<fieldset disabled>
  <legend>Account Information (Read Only)</legend>
  <label>Username: <input type="text" value="john_doe"></label><br>
  <label>Email: <input type="email" value="john@example.com"></label>
</fieldset>

Example 4: Fieldset with JavaScript Toggle

This example uses JavaScript to toggle the disabled state of a fieldset.

Play Code

<fieldset id="toggleFieldset">
  <legend>Optional Information</legend>
  <label>Phone: <input type="tel"></label><br>
  <label>Company: <input type="text"></label>
</fieldset>
<button onclick="document.getElementById('toggleFieldset').disabled = !document.getElementById('toggleFieldset').disabled">
  Toggle Fieldset
</button>

Example 5: Nested Fieldsets

Demonstrates how fieldsets can be nested for complex form organization.

Play Code

<fieldset>
  <legend>Order Information</legend>
  <label>Order Number: <input type="text"></label>
  
  <fieldset style="margin-top: 15px;">
    <legend>Products</legend>
    <label><input type="checkbox"> Product A</label><br>
    <label><input type="checkbox"> Product B</label>
  </fieldset>
  
  <fieldset style="margin-top: 15px;">
    <legend>Payment Method</legend>
    <label><input type="radio" name="payment"> Credit Card</label><br>
    <label><input type="radio" name="payment"> PayPal</label>
  </fieldset>
</fieldset>

Tips and Tricks

Accessibility: Always use a <legend> element to describe the group of form controls.
Styling: You can remove the default border with border: none; and create custom borders.
Flexbox/Grid: Fieldsets can be used as flex or grid containers for modern layouts.
JavaScript: Use the disabled property to enable/disable entire sections of a form.
Validation: Group related validation messages within the same fieldset for better user experience.

Browser Support

The <fieldset> element is supported by all modern browsers and has excellent support even in older browsers. The only notable issue is that some older versions of Internet Explorer had quirky behavior with fieldset positioning and sizing, but these issues are largely irrelevant today.