Form templates

Patterns for some of the most commonly used forms

As you customize these templates, ensure they continue to meet the accessibility guidelines for all form controls as well as the accessibility guidelines for each individual control.

In addition, when creating forms with multiple controls or customizing these templates, be sure to:

Display form controls in the same order in HTML as they do on screen. Do not use CSS to rearrange the form controls. Screen readers narrate forms in the order they appear in the HTML.
Visually align validation messages with the input fields, so people using screen magnifiers can read them quickly.
Group each set of thematically related controls in a fieldset element. Use the legend element to offer a label within each one. The fieldset and legend elements make it easier for screen reader users to navigate the form.
A single legend is always required for fieldset. A common use of fieldset and legend is a question with radio button options for answers. The question text and radio buttons are wrapped in a fieldset, with the question itself being inside the legend tag.
You can embed multiple fieldsets and legends for more complex forms.
Keep your form blocks in a vertical pattern. It's an ideal approach for accessibility, due to limited vision that makes it hard to scan from right to left.

Sample form

Documentation