HTML fieldset Tag
HTML <fieldset> tag is used to group related HTML elements in a single box, by drawing a bordered box around the grouped elements.
This is mostly used when we create a form on webpage. Grouping the related fields in a form displays the form fields in a more organized manner.
Suppose there is a form that is used for user registration as well as for the login process. Using the <fieldset> tag, we can group the fields used for the login process and the user registration process in two separate boxes, which will make it super easy for the end user to know which form fields are for login and which are for registration.
This is a block-level element.
HTML <fieldset> Tag - Syntax and Usage
The <fieldset> element requires the start(opening) tag and end(closing) tag.
Given below is the required syntax for the same:
<fieldset>
some content or form fields
</fieldset>
It is not necessary that we use the <fieldset> tag with form fields only. We can use it anywhere, where a grouping is required to show a set of information as one.
Using <legend> tag to provide heading
We can also use the <legend> tag just after the opening <fieldset> tag to provide a heading for the grouping. For example, to group the login form fields, we can provide the text Login within the <legend> tag and this text appers on the border.
?<fieldset>
<legend>Title Text</legend>
some content or form fields
</fieldset>
HTML <fieldset> Tag Basic Example
Below we have a basic example for <fieldset> tag, where we have also used the <legend> tag:
HTML <fieldset> Tag Attributes
This element supports Global attributes and Event attributes, along with a few specific attributes given below:
| Attribute |
Description |
Value |
disabled |
Disables the text area or specifies that a group of related form elements should be disabled |
disabled |
name |
Specifies a name for the fieldset |
text |
form |
Specifies one or more forms the fieldset belongs to or refers to the id of a form. |
form_id |
Default CSS style for HTML <fieldset> Tag
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);
}
Browser Support for HTML <fieldset> tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 4+
-
Safari 1+
-
Opera 4+
