REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<fieldset>

AI & DATA SCIENCE // fieldset-tag

The <fieldset> element groups a set of related form controls together, typically rendered with a border, and often paired with a <legend> caption.

Syntax

<fieldset>
  <legend>Shipping Address</legend>
  <input type="text" name="street">
</fieldset>

Deep Dive Course

**`<fieldset>`** visually and semantically groups related controls — for example, all the fields for a 'Shipping Address' section, or a set of radio buttons that represent one logical question. Browsers render a default border around it. Setting the **`disabled`** attribute on a `<fieldset>` disables every form control nested inside it at once, which is a convenient way to disable a whole section (e.g. while a form is submitting) without disabling each field individually.

1Understanding <fieldset>

`<fieldset>` visually and semantically groups related controls — for example, all the fields for a 'Shipping Address' section, or a set of radio buttons that represent one logical question. Browsers render a default border around it. Setting the `disabled` attribute on a <fieldset> disables every form control nested inside it at once, which is a convenient way to disable a whole section (e.g. while a form is submitting) without disabling each field individually.

💡

Setting disabled directly on a <fieldset> is a quick way to lock an entire section of a form (e.g. while an async submit request is in flight) without looping through and disabling every individual input yourself.

editor.html

<fieldset>
  <legend>Contact Preferences</legend>
  <label><input type="checkbox" name="email_opt"> Email</label>
  <label><input type="checkbox" name="sms_opt"> SMS</label>
</fieldset>

localhost:3000

2Practical Example

Here is a real-world application of <fieldset> showing how it is used in production HTML.

editor.html

<!-- Disabling an entire section while submitting -->
<fieldset id="paymentSection" disabled>
  <legend>Payment Details</legend>
  <input type="text" name="card_number">
</fieldset>

localhost:3000

3Best Practices

Follow these guidelines when working with <fieldset>:

1. Group logically related fields (like an address, or a set of radio options) inside a <fieldset>

2. Always pair it with a <legend> describing the group

3. Use fieldset's disabled attribute to disable a whole section at once when appropriate

⚠️

Tip: Setting disabled directly on a <fieldset> is a quick way to lock an entire section of a form (e.g. while an async submit request is in flight) without looping through and disabling every individual input yourself.

editor.html

<fieldset>
  <legend>Contact Preferences</legend>
  <label><input type="checkbox" name="email_opt"> Email</label>
  <label><input type="checkbox" name="sms_opt"> SMS</label>
</fieldset>

localhost:3000

Examples

Example 01Basic Usage

<fieldset>
  <legend>Contact Preferences</legend>
  <label><input type="checkbox" name="email_opt"> Email</label>
  <label><input type="checkbox" name="sms_opt"> SMS</label>
</fieldset>

Example 02Advanced Example

<!-- Disabling an entire section while submitting -->
<fieldset id="paymentSection" disabled>
  <legend>Payment Details</legend>
  <input type="text" name="card_number">
</fieldset>

Best Practices

Group logically related fields (like an address, or a set of radio options) inside a
Always pair it with a describing the group
Use fieldset's disabled attribute to disable a whole section at once when appropriate

Interview Question

What's a practical benefit of using <fieldset>'s disabled attribute over disabling each input individually?▼

Hint: Think about a multi-step or async form submission scenario.

Setting disabled on a <fieldset> instantly disables every form control nested inside it — inputs, selects, buttons, textareas — in one line, without needing to select and disable each element individually with JavaScript. This is especially handy for locking an entire section (like a payment form) while an async request is in progress, preventing double-submission or edits mid-request, then re-enabling the whole group at once when the request finishes.

Exercises

EasyPractice using <fieldset> in a real scenario.

View Solution

<fieldset>
  <legend>Contact Preferences</legend>
  <label><input type="checkbox" name="email_opt"> Email</label>
  <label><input type="checkbox" name="sms_opt"> SMS</label>
</fieldset>

Frequently Asked Questions

What's a practical benefit of using <fieldset>'s disabled attribute over disabling each input individually?▼

Setting disabled on a

instantly disables every form control nested inside it — inputs, selects, buttons, textareas — in one line, without needing to select and disable each element individually with JavaScript. This is especially handy for locking an entire section (like a payment form) while an async request is in progress, preventing double-submission or edits mid-request, then re-enabling the whole group at once when the request finishes.

Related Functions

legend-tagform-tag