Form Structure (<section>, <fieldset>, <legend>)

When To Use 

  • Complex forms that may have have multiple parts should get structured semantically.

Rules

  • There are two possibilities to structure forms:
    • First, the <fieldset> and its <legend> element. This is recommended by W3C WAI. 2
      • Make sure to label the fieldset by including the <legend> element as the first child or by using a <label> elementb or aria-labelledby or aria-label attributes.
    • Second, the <section> element. This is recommended by MDN. 1
  • Personal opinion: Since W3C is more official than the MDN docs, and because the <fieldset> element is more semantic as the generic <section> element I would use <fieldset> and <legend>.

Examples (for forms with multiple parts):

  • A payment form that has a contact Information part and a payment Info part. 1
  • A shipment form with a selection of existing addresses and a part where the user can input new address details.

Sources 

  1. MDN: How to structure a web form by Mozilla contributors is licensed under CC-BY-SA 2.5
  2. W3C: Grouping Controls by W3C WAI Tutorial Contributors is licensed under W3C Document License
Created at: 11.02.2023, Last updated at: 24.05.2024