<fieldset>

Definition

The HTML <fieldset> element is used to group related elements within a form and draw a box around them to visually distinguish them from other parts of the form. The <fieldset> element is often used in conjunction with the <legend> element, which provides a caption or heading for the group of form elements.

Examples

Here's an example of how <fieldset> and <legend> could be used together:

<form>
  <fieldset>
    <legend>Personal 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>
  </fieldset>
</form>

In this example, the <fieldset> element groups the name and email form fields together and the <legend> element provides a caption that reads "Personal Information" to describe the purpose of the form fields within the fieldset.

Attributes

This element's attributes include the global attributes.

Best Practices

• The primary purpose of <fieldset> is to group related form elements and distinguish them from other parts of the form. Use <fieldset> to group form elements that share a common purpose or belong to the same section of the form.
• The <legend> element provides a heading or caption for the group of form elements contained within the <fieldset>. Use <legend> to describe the purpose or contents of the form elements within the fieldset. The <legend> element should be the first child of the <fieldset> element.
• Use semantic class names to indicate the purpose or context of the <fieldset> element. For example, you might use a class name like "shipping-address" or "billing-info" to indicate the purpose of a particular fieldset.
• Use ARIA attributes like aria-describedby and aria-labelledby to improve the accessibility of your forms. These attributes can be used to associate a <fieldset> element with a description or label that provides additional context for screen reader users.
• While it's possible to use <fieldset> and <legend> to create layout structures, this is not their primary purpose. Instead, use CSS for layout and styling purposes, and reserve <fieldset> for grouping related form elements.

Accessibility Considerations

• Make sure to use <legend> and provide a clear and descriptive heading to describe the purpose or contents of the form elements within the fieldset. This will help users with visual impairments or cognitive disabilities to understand the context of the form elements within the fieldset.
• Use ARIA attributes like aria-describedby and aria-labelledby to improve the accessibility of your forms. These attributes can be used to associate a <fieldset> element with a description or label that provides additional context for screen reader users.
• Use semantic class names to indicate the purpose or context of the <fieldset> element.
• Make sure that users can navigate through the form elements within the <fieldset> using the keyboard. This means that all form elements should be focusable and operable using the keyboard alone, without the need for a mouse or other pointing device.
• If you use color to distinguish between the <fieldset> and other parts of the form, make sure that there is sufficient color contrast between the foreground and background colors. This will help users with visual impairments to distinguish the fieldset from other parts of the form.

Browser Compatibility