HTML Tags
HTML <fieldset> Tag
The
<fieldset>tag is used to group related elements in a form.
It helps organize form controls visually and semantically, often improving usability and accessibility.
It is usually combined with the<legend>tag to provide a caption for the grouped fields.
Syntax
html
<fieldset>
<legend>Group Name</legend>
<!-- Form elements go here -->
</fieldset>Attributes
| Attribute | Description |
|---|---|
| disabled | Disables all form controls within the fieldset. |
| form | Associates the fieldset with a specific form (useful if outside the form). |
| name | Specifies the name of the fieldset (rarely used). |
| id | Assigns a unique ID to the fieldset. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/samples/form_processor.php" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</fieldset><br>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset><br>
<input type="submit" value="Register">
</form>
</body>
</html>Output
Browser Output
html
You will see two distinct sections in the form, each surrounded by a box with a legend at the top.
The first box is “Personal Information,” and the second is “Account Details.”
Try it in our TryIt Editor to see the visual grouping and how it improves form readability.Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <fieldset> tag.
Notes
<fieldset>visually groups form fields and improves form semantics.- Combine with
<legend>for a caption describing the group. disabledcan disable all fields in the group.- Useful for long or complex forms to make them more readable.
Conclusion
The <fieldset> tag is ideal for grouping related form elements, making forms more organized and user-friendly.
It enhances visual clarity and accessibility for users and assistive technologies.