HTML <fieldset> Tag – Group Form Elements
📌 Introduction
The <fieldset> tag is used to group related elements inside a form.
It helps organize forms into sections, making them easier to read and use.
It is often used with:
<legend>→ title of the group
🧱 Syntax
<form>
<fieldset>
<legend>Group Title</legend>
<input type="text" />
<input type="email" />
</fieldset>
</form>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text" />
<br /><br />
<label>Email:</label>
<input type="email" />
</fieldset>
<br />
<fieldset>
<legend>Account Details</legend>
<label>Password:</label>
<input type="password" />
</fieldset>
<br />
<button type="submit">Register</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Form is divided into sections
- Each section is inside a
<fieldset> - Each group has a title using
<legend> - Form becomes cleaner and more readable
🎯 Why <fieldset> is Important
1. 🧠 Better Organization
Breaks large forms into logical parts.
2. 📊 Professional UI
Used in:
- Login forms
- Registration forms
- Settings pages
3. ♿ Accessibility
Screen readers understand grouped content better.
🧩 <fieldset> + <legend>
<fieldset>
<legend>Contact Info</legend>
<input type="text" />
</fieldset>
✔ <legend> acts like a title for the group
🎨 Styling Example
<fieldset style="padding:10px;">
<legend>Info</legend>
<input type="text" />
</fieldset>
⚖️ <fieldset> vs <div>
| Tag | Purpose |
|---|---|
<fieldset> |
Semantic form grouping |
<div> |
Generic layout container |
🚫 Common Mistakes
- Using
<fieldset>without forms ❌ - Forgetting
<legend>❌ - Overusing it for layout ❌
🧪 Mini Exercise
Create a form with:
- One
<fieldset>for personal info - One
<fieldset>for account info - Use
<legend>for each section - Add labels and inputs properly