Documentation: Form patterns

[usethetics]

How to structure forms.

[usethetics]

Add fieldset container guidelines.

[usethetics]

Add validation documentation.

[usethetics]

Add fieldset and legend documentation.

[usethetics]

Add in-depth explanation for form accessibility guidelines. I.e. why does a label need to be associated with an input field, etc.

[usethetics]

Add guidelines on how to make forms gender inclusive.

Den Haag already made efforts creating guidelines: Terugdringen van onnodige vragen naar sekse

And there is the Genderdoeboek by Transgender Netwerk Nederland.

HT. Celina van Hees

[usethetics]

Example displaying an error overview and error text in combination with helper text. The overview of all errors in the form is displayed on top of the form with links to each individual error.

Note the error text’s placement above the input field, creating a natural flow and making it obvious for all users, in particular users relying on screenreaders as the error text is partly informed by the input label and helper text.