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
- First, the <fieldset> and its <legend> element. This is recommended by W3C WAI. 2
- 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
- MDN: How to structure a web form by Mozilla contributors is licensed under CC-BY-SA 2.5
- W3C: Grouping Controls by W3C WAI Tutorial Contributors is licensed under W3C Document License