HTML <fieldset> Tag
The HTML <fieldset> tag visually groups logically related fields in an HTML form defined with the <form> tag. See, also syntax and examples
The <fieldset> tag visually groups logically related fields in an HTML form defined with the <form> tag. The tag allows breaking forms down into logical sections. In browsers, a box around the content is drawn.
Syntax
The <fieldset> tag comes in pairs. The content is written between the opening (<fieldset>) and closing (</fieldset>) tags.
Example of the HTML <fieldset> tag:
HTML <fieldset> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-day">Place of birth:</label>
<input type="text" id="birth-day" />
</div>
</fieldset>
</form>
</body>
</html>Result
The <fieldset> element for organizing forms
The majority of online forms are hard to use and disorganized. Arranging them into logical sections significantly improves usability. Using the <fieldset> element with the <legend> element creates clear boundaries and makes your forms easier to navigate.
Attributes
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Indicates that a group of related form elements must be disabled. |
| form | form_id | Defines one or more form identifiers (id), to which the set of related elements belongs. If there are several identifiers, then they must be separated by spaces. |
The <fieldset> tag supports the Global Attributes and the Event Attributes.
Practice
What is the role of the HTML fieldset tag?