Summary  
This chapter covers grouping related form controls with the HTML <fieldset> element and providing descriptive headings via <legend> to enhance structure and accessibility.

General domain of usage  
HTML form design and accessibility

When you design forms with multiple related fields, using the `fieldset` element helps you group these fields together in a way that is clear for everyone. The `legend` element provides a descriptive heading for the group, making it easier for users to understand the form's structure. This approach is especially important for accessibility: screen readers will announce the group and its legend, giving users important context about the information being requested.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkFkZHJlc3MgRm9ybSBFeGFtcGxlPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGUuY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxmb3JtPgogICAgICA8ZmllbGRzZXQ+CiAgICAgICAgPGxlZ2VuZD5NYWlsaW5nIEFkZHJlc3M8L2xlZ2VuZD4KICAgICAgICA8bGFiZWwgZm9yPSJzdHJlZXQiPlN0cmVldDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ic3RyZWV0IiBuYW1lPSJzdHJlZXQiIC8+PGJyIC8+PGJyIC8+CiAgICAgICAgPGxhYmVsIGZvcj0iY2l0eSI+Q2l0eTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0iY2l0eSIgbmFtZT0iY2l0eSIgLz48YnIgLz48YnIgLz4KICAgICAgICA8bGFiZWwgZm9yPSJwb3N0YWwiPlBvc3RhbCBDb2RlOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJwb3N0YWwiIG5hbWU9InBvc3RhbCIgLz4KICAgICAgPC9maWVsZHNldD4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKICBmb250LWZhbWlseTogJ0ludGVyJywgc3lzdGVtLXVpLCBzYW5zLXNlcmlmOwp9Cgpib2R5IHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTM1ZGVnLCAjZjlmYWZiLCAjZTVlN2ViKTsKICBtaW4taGVpZ2h0OiAxMDB2aDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgcGFkZGluZzogMjBweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgcGFkZGluZzogMnJlbSAyLjVyZW07CiAgYm9yZGVyLXJhZGl1czogMTZweDsKICBib3gtc2hhZG93OiAwIDhweCAyNHB4IHJnYmEoMCwgMCwgMCwgMC4wOCk7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgZ2FwOiAxcmVtOwp9CgpmaWVsZHNldCB7CiAgYm9yZGVyOiAxLjVweCBzb2xpZCAjZDFkNWRiOwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMXJlbSAxLjJyZW0gMS4ycmVtOwp9CgpsZWdlbmQgewogIHBhZGRpbmc6IDAgMC41cmVtOwogIGNvbG9yOiAjMTExODI3OwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgZm9udC1zaXplOiAxcmVtOwp9CgpsYWJlbCB7CiAgY29sb3I6ICMzNzQxNTE7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBmb250LXNpemU6IDAuOTVyZW07CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luLWJvdHRvbTogMC40cmVtOwp9CgppbnB1dCB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMC43NXJlbSAxcmVtOwogIGJvcmRlcjogMS41cHggc29saWQgI2QxZDVkYjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAwLjI1cywgYm94LXNoYWRvdyAwLjI1czsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0OmZvY3VzIHsKICBvdXRsaW5lOiBub25lOwogIGJvcmRlci1jb2xvcjogIzNiODJmNjsKICBib3gtc2hhZG93OiAwIDAgMCAzcHggcmdiYSg1OSwgMTMwLCAyNDYsIDAuMTUpOwp9CgpAbWVkaWEgKG1heC13aWR0aDogNDgwcHgpIHsKICBmb3JtIHsKICAgIHBhZGRpbmc6IDEuNXJlbTsKICB9Cn0=

By grouping related fields, you make forms easier to scan for sighted users, who can quickly identify logical sections. For users of assistive technologies, the grouping and legend are announced, improving navigation and comprehension throughout the form.

Which statements accurately describe the benefits of using `fieldset` and `legend` elements in web forms?

An introduction to creating well-structured and accessible HTML forms. Explore fundamental form elements, validation techniques, and best practices for ensuring accessibility. Learn how to design forms that are both functional and user-friendly, as they are essential components of any interactive website.

Understand how forms collect user input and how to define them using essential elements and attributes. Explore textual and specialized input types that make forms functional and user-friendly.

Learn how to structure forms for clarity and usability using grouping, labeling, and selection elements. Discover how to connect labels to inputs and use <fieldset> and <legend> to create logical sections within a form.

Improve user experience with accessible and semantic forms. Apply ARIA attributes, validation rules, and CSS pseudo-classes to provide clear feedback and ensure forms are both inclusive and visually intuitive.

Grouping with <fieldset> and <legend>

Awesome!

Grouping with <fieldset> and <legend>