Grouping Form Elements for Better Structure
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.
index.html
index.css
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.
index.html
index.css
- The
fieldsetgroups the checkboxes into one logical section; - The
legendtells the user what the group is about; - Checkboxes allow selecting multiple items.
You've completed the final HTML step. If you want to continue growing your skills, your next step is CSS , where you'll learn how to style and design modern, attractive web pages.
1. What is the purpose of the legend element in HTML fieldsets?
2. Why is grouping related form elements with the fieldset element important?
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me a sample HTML form using fieldset and legend?
What are some best practices for using fieldset and legend in forms?
Are there accessibility benefits to using fieldset and legend?
Awesome!
Completion rate improved to 2.38Grouping Form Elements for Better Structure
Swipe to show menu
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.
index.html
index.css
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.
index.html
index.css
- The
fieldsetgroups the checkboxes into one logical section; - The
legendtells the user what the group is about; - Checkboxes allow selecting multiple items.
You've completed the final HTML step. If you want to continue growing your skills, your next step is CSS , where you'll learn how to style and design modern, attractive web pages.
1. What is the purpose of the legend element in HTML fieldsets?
2. Why is grouping related form elements with the fieldset element important?
Thanks for your feedback!
