HTML <legend> Tag – Fieldset Title
📌 Introduction
The <legend> tag is used to define a title for a <fieldset> group.
It describes what the grouped form fields are about.
👉 It always works inside <fieldset>.
🧱 Syntax
<fieldset>
<legend>Group Title</legend>
<input type="text" />
</fieldset>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Legend 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">Submit</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Each
<fieldset>is grouped visually <legend>appears as the title of each group- Helps users understand form sections
🎯 Why <legend> is Important
1. 🧠 Improves Clarity
Users instantly understand each section.
2. 📊 Professional Forms
Used in:
- Registration pages
- Login forms
- Settings panels
3. ♿ Accessibility
Screen readers read the legend as a section title.
🧩 Example Structure
<fieldset>
<legend>Contact Info</legend>
<input type="text" />
</fieldset>
🎨 Styling Example
<legend style="font-weight:bold;">Personal Info</legend>
⚖️ <legend> vs <label>
| Tag | Purpose |
|---|---|
<legend> |
Title for fieldset group |
<label> |
Label for individual input |
🚫 Common Mistakes
- Using
<legend>outside<fieldset>❌ - Forgetting it in grouped forms ❌
- Using it instead of
<label>❌
🧪 Mini Exercise
Create a form with:
- A
<fieldset>for personal data - A
<legend>titled “Personal Info” - Inputs for name and email
- A second fieldset for account info
- Proper labels for inputs