Tag fieldset

The fieldset tag is used to group related form elements (such as inputs, checkboxes, or radio buttons) within a web form. It improves accessibility, readability, and allows browsers to visually group related inputs — often with a border and spacing.

It is usually paired with the <legend> tag, which provides a label or title for the group.

---

✅ Basic Syntax

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

📍 Result:
A bordered box labeled “Contact Information” with input fields inside it.

---

🎨 Styling Example

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

legend {
  font-weight: bold;
  color: #333;
}

---

🧩 Common Use Cases

• Personal details section (name, email, address)
• Payment information
• Grouped options like gender (radio buttons), interests (checkboxes), etc.

---

🔒 Disabling a Group

You can disable all inputs inside a <fieldset>:

<fieldset disabled>
  <legend>Disabled Section</legend>
  <input type="text" placeholder="Can't type here">
</fieldset>

All child elements will become uneditable.

---

✅ Summary

Feature	Description
Tag	<fieldset>
Purpose	Group related form controls
Common Pair	<legend> for labeling the group
Default Style	Box with a border and some padding
Accessibility	Improves structure for screen readers

---