HTML <fieldset> Tag
Example
<form action="action.php">
<fieldset>
<legend>User Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>Meaning
The <fieldset> element allow to group thematically related controls together.
The element usually contains a <legend> element, which labels the grouped form controls.
Version: HTML 4, 4.01, 5
Standard Syntax
<fieldset>...</fieldset>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | This is a Boolean attribute, it sets all form controls that are descendants of the <fieldset> |
| form | formId | This attribute takes the value of the id attribute of a <form> element and to be part of <fieldset>, if it is not inside the form it will work. |
| name | text | This attribute specifies a name for a fieldset. |
Global Attributes
<fieldset> element also supports the Global Attributes in HTML.
Event Attributes
<fieldset> element also supports the Event Attributes in HTML.
More Examples
The following example add CSS to fieldset.
Example
<style>
fieldset {
background-color: #ddd;
border-radius: 5px;
}
legend {
background-color: black;
color: white;
padding: 4px 16px;
border-radius: 5px;
}
input {
margin: 4px;
}
</style>By Default CSS Value(s)
Most of the browsers will display the <fieldset> element with the following by default value(s)
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}