How can I group form fields using semantic structure?
Asked on Sep 07, 2025
Answer
To group form fields using semantic structure, you can use the
<fieldset> and <legend> elements. The <fieldset> groups related fields, while the <legend> provides a caption for the group.
<!-- BEGIN COPY / PASTE -->
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
</form>
<!-- END COPY / PASTE -->Additional Comment:
- The
<fieldset>element helps in logically grouping form fields, improving accessibility. - The
<legend>element provides a descriptive caption for the grouped fields, enhancing clarity. - Using these elements can improve the user experience, especially for screen reader users.
✅ Answered with HTML best practices.
Recommended Links: