When form fields are related, grouping them helps users process information more easily. It breaks large forms into smaller, clear sections and improves usability. In HTML, grouping is done with <fieldset> and <legend>.

fieldset and legend Elements

• <fieldset> groups related form controls;
• <legend> adds a title for that group.

Useful for radio buttons, checkboxes, and any section of related fields.

Example

This example uses the fieldset element to group related form controls together and the legend element to provide a caption for the group. It focuses on a product selection form where users can choose multiple products.

• The fieldset groups the checkboxes into one logical section;
• The legend tells the user what the group is about;
• Checkboxes allow selecting multiple items.

Transition to CSS

Now that you understand how to structure webpages with HTML, it is time to make them visually appealing and responsive.

In the next course, you will learn CSS — the technology used to style webpages, control layouts, adjust spacing, work with colors and typography, and create modern user interfaces used in real frontend applications.