HTML <fieldset> tag is responsible for grouping together fields and labels that are logically related within an HTML form.
Using this element is not mandatory when developing an HTML form, however, incorporating the <fieldset> tag simplifies comprehension of the grouped elements within the form.
The <legend> tag is employed alongside the <fieldset> element positioned as the initial child to specify the caption for a set of associated fields.
This pairing of <fieldset> element and <legend> element aids in arranging and formatting the form, enhancing its clarity and user-friendliness.
Syntax of <legend> Tag
<fieldset> Form elements </fieldset>
The above syntax contains :
- <fieldset>: It is the starting tag of the <fieldset> element.
- </fieldset>: It is the closing tag of the <fieldset> element.
The form components are positioned within the <fieldset> tag.
Syntax of <legend> Tag
<legend> caption </legend>
The above syntax contains :
- <legend>: It is the starting tag of the <legend> element.
- </legend>: It is the closing tag of the <legend> element.
The description is placed within the start and end tags of the <legend> element.
Examples of the <fieldset> Tag
Example 1:
We establish a "User basic details" category by employing the <fieldset> tag in this illustration.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-1 of <fieldset> tag</title>
<style>
body {
text-align: center;
}
p {
color: #db7093;
text-align: center;
font-size: 40px;
font-weight: bold;
}
form{
color: white;
width: 600px;
height: 315px;
margin: auto;
}
div {
background-color: #28455e;
}
.feedback {
margin-left: 15px;
}
</style>
</head>
<body>
<h1>Example-1 of the <fieldset> tag</h1>
<p>User Feedback Form</p>
<div>
<form class="wd">
<fieldset class="wd">
<legend>User basic information:</legend>
<label>First Name</label> <br>
<input type="text" name="fname"> <br>
<label>Last Name</label> <br>
<input type="text" name="lname"> <br>
<label>Enter Email</label> <br>
<input type="email" name="email"> <br><br>
</fieldset> <br>
<label class="feedback">Enter your feedback:</label> <br>
<textarea class="feedback" cols="30"></textarea> <br><br>
<input class="feedback" type="Submit" value="Submit"> <br>
</form>
</div>
</body>
</html>
Output:
The name of the group is shown, and a border is applied around the grouped items.
Example 2
In this instance, we are forming two categories, labeled as "Contact Details" and "Location Details", employing the <fieldset> element.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-2 of the <fieldset> tag</title>
<style>
body {
font-family:'Courier New', Courier, monospace;
text-align: center;
}
form {
width: 350px;
margin: auto;
}
fieldset {
border: 2px solid #f8afaf;
border-radius: 5px;
margin-bottom: 15px;
padding: 10px;
}
legend {
font-weight: bold;
color: #910c0c;
}
label {
display: inline-block;
text-align: right;
margin-right: 5px;
}
.submit {
background-color: #9c2f0e;
color: #fde2e2;
font-size: 18px;
padding: 6px 15px;
border: none;
border-radius: 6px;
}
</style>
</head>
<body>
<h1>Example-2 of the <fieldset> tag</h1>
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"> <br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"> <br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"> <br><br>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="street">Street:</label>
<input type="text" id="street" name="street"> <br><br>
<label for="city">City:</label>
<input type="text" id="city" name="city"> <br><br>
<label for="state">State:</label>
<input type="text" id="state" name="state"> <br><br>
</fieldset>
<input type="submit" value="Submit" class="submit">
</form>
</body>
</html>
Output:
As illustrated below, a boundary line encloses the two groups.
Example 3
In this instance, we are establishing two categories, titled "Product Details" and "Shipping Details", utilizing the <fieldset> element.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-3 of the <fieldset> tag</title>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
background-color: #fdf8e7;
}
h1 {
text-align: center;
}
form {
max-width: 500px;
margin: auto;
background-color: #fbeb75;
padding: 25px;
border-radius: 6px;
}
fieldset {
border: 3px dotted #68541d;
border-radius: 6px;
padding: 10px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
color: #261e1e;
}
label {
display: inline-block;
font-size: 18px;
color: #cf6610;
text-align: right;
}
#product, #quantity, textarea {
padding: 10px 20px;
border: 1px solid #fdf39e;
border-radius: 2px;
background-color: #f3f0dd;
}
#submit {
background-color: #48f35c;
color: white;
border: none;
font-size: 15px;
font-weight: bold;
padding: 15px 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Example-3 of the <fieldset> tag</h1>
<form>
<fieldset>
<legend>Product Details</legend>
<label for="product">Product Name:</label>
<input type="text" id="product" name="product"> <br><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity">
</fieldset>
<fieldset>
<legend>Shipping Information</legend>
<label for="address">Shipping Address:</label> <br><br>
<textarea id="address" name="address" cols="50" rows="4"></textarea> <br><br>
</fieldset>
<input type="submit" value="Place Order" id="submit">
</form>
</body>
</html>
Output:
As depicted below, a border is outlined around the two sets.
Example 4
In this instance, we are establishing a collection called "Your Information" and deactivating all form elements within the <fieldset> tag by applying the "disabled" attribute.
Code:
Output:
Below, a border is delineated around a set of elements, with all form inputs deactivated.
Attributes
Tag-specific attribute:
| Attribute | Value | Description |
|---|---|---|
| Disabled | Disabled | It specifies that all form controls within the <fieldset> tag are disabled. |
Form |
form_id | It specifies which form <fieldset> is when the form contains multiple fieldsets. |
Name |
Text | It specifies the name associated with the <fieldset>. It will not display in the browser and is useful with JS. |
Global attributes
HTML <fieldset> element allows for the utilization of global attributes within an HTML document.
Event attributes
HTML <fieldset> element facilitates the utilization of event attributes within HTML.
Browser Support
Below are the browsers that support the <fieldset> tag:
- Safari
- Google Chrome
- Internet Explorer
- Firefox
- Microsoft Edge
- Opera
Conclusion
In this tutorial, you have explored the HTML <fieldset> element through practical illustrations and its function in organizing associated fields within an HTML form.