HTML <fieldset> Tag
Concept
The <fieldset> tag in HTML is utilized to group related elements within a form. It’s a way to organize form controls, making the form more user-friendly. This tag often works in conjunction with the <legend> tag to provide a caption for the fieldset.
Implementation
Example: Grouping Contact Information
Imagine you are creating a registration form, and you want to group the contact information together. You can use the <fieldset> tag to achieve this:
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
Example: Grouping Payment Details
In an e-commerce checkout form, you might want to group the payment details together:
<form>
<fieldset>
<legend>Payment Details</legend>
<label for="cardNumber">Card Number:</label>
<input type="text" id="cardNumber" name="cardNumber">
<label for="expiryDate">Expiry Date:</label>
<input type="date" id="expiryDate" name="expiryDate">
</fieldset>
</form>
Try it out below:
Attributes
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that a group of related form elements should be disabled. |
| form | form_id | Specifies which form the fieldset belongs to. |
| name | text | Specifies a name for the fieldset. |
Global Attributes
The <fieldset> tag supports all the global attributes in HTML.
Event Attributes
The <fieldset> tag also supports all the event attributes in HTML.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
Most browsers will display the <fieldset> element with the following default CSS settings:
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);
}Conclusion
The <fieldset> tag is valuable for web developers, allowing for the logical grouping of form elements.
It enhances the user experience by providing a clear structure to forms, making them more accessible and easier to navigate.