fieldset

A fieldset is an HTML element used to group related form controls together within a form. By organizing inputs into logical sections, it improves readability and accessibility for users of assistive technologies. The fieldset is typically labeled with a legend, which provides a caption for the contained controls and is usually the first child of the fieldset.

The fieldset can contain various form controls such as input, select, textarea, and button, along with the legend element. In HTML5, the fieldset can be disabled to disable all descendant controls, a common technique for indicating an inapplicable or inactive section of a form. Fieldsets are most often used inside a form element, but their grouping semantics remain valid even in more complex layouts.

Rendering and styling: browsers display a border around the grouped controls with the legend label overlapping the border. CSS can be used to customize borders, spacing, and typography, but developers should preserve the semantic grouping for accessibility.

Accessibility: A clear, descriptive legend is important because screen readers announce the group label and describe the controls within. Avoid empty legends, and ensure the group remains logically coherent when navigated by a keyboard or assistive technology.

Example use: A sign-up form may include a fieldset labeled 'Account information' containing username and password fields, while another fieldset labeled 'Personal details' contains name, email, and address fields.

History: The fieldset element emerged in early HTML specifications to improve form organization and accessibility and remains a standard tool for grouping related controls in modern web pages.