Fieldset Tag in HTML
What is a Fieldset Tag?
In HTML, linked elements within a form are grouped and given a border or visual separator by using the <fieldset> tag. It facilitates form organization and structure by combining related input fields into one group. To give the grouped elements a caption or title, the <legend> element is frequently used with <fieldset>.
HTML <fieldset> tag is used to group the logically related fields/labels contained within an HTML form.
The use of this tag is optional while creating an HTML form, but by using <filedset>, it is easy to understand the purpose of grouped elements of form.
The <legend> tag is used with the <fieldset> element as a first child to define the caption for the grouped related fields.
An HTML element that provides a container with an optional title or caption using the <legend> element and is used to visually group and arrange related form elements. This enhances HTML forms accessibility and structure.
Syntax
The syntax of the fieldset tag is as follows:
<form>
<fieldset>
<legend>Contact Information</legend>
<!-- Your form elements go here -->
</fieldset>
</form>
Use of fieldset tag
In HTML, related form elements are grouped using the <fieldset> tag. Its main goal is to improve a web form structure and organization. The <fieldset> tag has the following primary uses and advantages:
1.Combining Similar Form Elements
Related form controls like text inputs, radio buttons, checkboxes, and so on can be grouped using the <fieldset> tag.
2. Visual separation
It gives the grouped elements a visual border or separation. To clearly identify which form controls are related to each other, this division is frequently shown as a border surrounding the grouped elements.
3. Accessibility
For users of assistive technologies, accessibility is enhanced using <fieldset> and <legend> elements. The <legend> can be utilized by screen readers, for example, to offer more context regarding the objectives of the grouped elements.
4. Legend for Grouped Elements
Users will find it even easier to understand the purpose of that section when the optional <legend> element inside the <fieldset> provides a title or caption for the collection of form controls.
Attributes of Fieldset Tag
In HTML, the <fieldset> tag has a number of attributes that can be used to change its appearance and behavior. These are the attributes that are often used:
1. Disabled
All of the form controls inside the <fieldset> are turned off when this Boolean attribute is present. When you wish to turn off a collection of form elements conditionally, this is helpful.
2. Form
Names the form element to which the <fieldset> is attached. When the <fieldset> is not a direct child of the <form> element, this attribute is especially helpful.
3. Name
Gives the <fieldset> a name. This feature may come in handy when sending the form data to the server.
Keep in mind that the main function of the <fieldset> tag is to group related form elements. A <fieldset> can optionally have a title or caption provided for the group by using the <legend> tag. When necessary, those mentioned attributes can improve the <fieldset> styling and functionality.
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Example</title>
<style>
/* Optional: Adding some basic styling for better visualization */
fieldset {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
legend {
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<!-- Additional form elements related to contact information can be included here -->
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address"><br>
<label for="city">City:</label>
<input type="text" id="city" name="city"><br>
</fieldset>
<!-- Additional form elements and submit button can be outside the fieldsets -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Example</title>
<style>
/* Optional: Adding some basic styling for better visualization */
fieldset {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
legend {
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName"><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="color">Favorite Color:</label>
<input type="text" id="color" name="color"><br>
<label for="food">Favorite Food:</label>
<input type="text" id="food" name="food"><br>
</fieldset>
<!-- Additional form elements and submit button can be outside the fieldsets -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Output: