fieldsetlegend

Fieldset and legend are HTML elements used to group related controls in a form. The fieldset element creates a box around its child form controls, helping users understand the relationship between inputs. The legend element provides a caption for the fieldset, serving as the label for the entire group. In standard usage, the legend should be the first child of the fieldset and describes the purpose of the grouped controls. The content of the legend must be phrasing content; simple text is typical, but inline elements can be used to add emphasis.

Accessibility is a key consideration. Grouping form controls with fieldset and legend improves navigation for assistive technologies. Screen readers announce the legend before the controls in the group, aiding orientation. If a fieldset has no legend, its purpose may be harder to determine; however styling can be used to hide a legend visually while keeping it accessible to screen readers.

Styling and browser behavior: By default, browsers render a border around the fieldset and place the legend caption along the top border. CSS allows extensive styling: borders, margins, padding, fonts, and the position of the legend. However, legends can be tricky to style consistently across browsers, so many developers use fieldset and legend for semantics rather than as the sole styling mechanism.

Common use cases: group related controls such as contact information, account settings, or survey questions. Nested fieldsets are possible for complex forms, with nested legends providing hierarchical labeling. This combination—fieldset and legend—remains a core pattern for accessible, well-structured forms.