HTML
fieldset tag


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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.