Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Grouping Form Elements for Better Structure | HTML Forms and User Input
Ultimate HTML

book
Grouping Form Elements for Better Structure

When elements are related to each other, it is beneficial to group them as it helps the user to better comprehend the form, and it allows them to concentrate on smaller, structured sets of fields rather than attempting to understand the entire form at once. Grouping can be accomplished both visually on the interface and logically in the code.

fieldset and legend Elements

You can use the <fieldset> element to group several related form elements together. It provides a container for these elements, and you can add a group title using the nested <legend> element. It is important to group related radio buttons and checkboxes, and other field types can also be grouped as necessary. This helps improve the organization and clarity of the form for the user.

html

index.html

css

index.css

copy
<link rel="stylesheet" href="index.css" />

<form onsubmit="return false">
<fieldset>
<legend>Contact details</legend>
<label>
Name
<input type="text" name="username" />
</label>
<label>
Email
<input type="email" name="email" />
</label>
<label>
Phone Number
<input type="tel" name="phone" />
</label>
</fieldset>
<button type="submit">Send</button>
</form>

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.

html

index.html

css

index.css

copy
<link rel="stylesheet" href="index.css" />
<form onsubmit="return false">
<fieldset>
<legend>Choose the products</legend>
<label>
<input type="checkbox" name="product" value="vegetable" />
vegetable
</label>
<label>
<input type="checkbox" name="product" value="fruit" />
fruit
</label>
<label>
<input type="checkbox" name="product" value="dairy" />
dairy
</label>
</fieldset>
<button type="submit">Order</button>
</form>
  • The fieldset groups the checkboxes together, making the form more organized and easier to understand for the user;
  • The legend provides a title, telling the user that the section is for choosing products;
  • The checkboxes allow the user to select multiple products from the available options. Each option is associated with a specific product (vegetable, fruit, dairy).

Note

Congratulations on finishing the HTML course! You've reached the final chapter, and now you're equipped with a solid foundation in web development. If you're interested in further exploring the field, consider diving into CSS - the language of web page styling and design. Enhance your skills and unlock endless possibilities for creating visually appealing websites.

1. What is the purpose of the legend element in HTML fieldsets?

2. Why is grouping related form elements with the fieldset element important?

question mark

What is the purpose of the legend element in HTML fieldsets?

Select the correct answer

question mark

Why is grouping related form elements with the fieldset element important?

Select a few correct answers

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 10
some-alt