How can I group form fields using semantic structure?

Ask any question about HTML here... and get an instant response.

Post this Question & Answer:

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.

Ask any question about HTML here... and get an instant response.

How can I group form fields using semantic structure?

Asked on Sep 07, 2025

Answer

Additional Comment:

Real Questions. Clear Answers.