HTML
The <fieldset>
tag in HTML is used to group related elements within a form, particularly for creating a logical structure and visual grouping of form controls. It is often used in conjunction with the <legend>
tag to provide a caption or label for the grouped elements.
Syntax:
<fieldset>
<legend>Group Title</legend>
<!-- Form controls and elements here -->
</fieldset>
Key Characteristics:
Grouping Form Elements: The primary purpose of the
<fieldset>
tag is to group together related form elements, making it easier to organize complex forms and improve usability.Visual Styling: By default, browsers render the
<fieldset>
element with a border around the grouped elements, providing a visual distinction between different sections of a form.Legend: The
<legend>
tag, used inside the<fieldset>
, provides a caption or label for the group. It helps users understand the purpose of the grouped elements and can improve form accessibility.Accessibility: The
<fieldset>
and<legend>
tags improve form accessibility by clearly defining and labeling related sections of a form, making it easier for screen readers to interpret the structure and purpose of the form controls.
Example Usage:
Basic Example:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Receive updates:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<button type="submit">Submit</button>
</form>
In this example:
- Two
<fieldset>
elements group related form controls: one for "Personal Information" and another for "Preferences." - Each
<fieldset>
includes a<legend>
to describe the group of controls.
Example with CSS Styling:
<style>
fieldset {
border: 2px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}
</style>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Account Settings</legend>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password">
</fieldset>
<button type="submit">Register</button>
</form>
In this example:
- The
<fieldset>
elements are styled with a border and padding. - The
<legend>
is styled with bold text and padding for better readability.
Accessibility and SEO:
- Accessibility: The
<fieldset>
and<legend>
tags improve form accessibility by providing clear structure and labels for form controls. Screen readers can interpret these elements to provide users with information about the grouped form fields. - SEO: While the
<fieldset>
tag does not directly impact SEO, using it to organize form elements can contribute to a better user experience. A well-structured form that is easier to navigate and understand can improve user engagement and satisfaction, which can indirectly benefit SEO.