Forms Best Practices
Forms are an integral part of designing for the web. Making your forms functional, accessible, and beautiful will help the people using your software to be more productive.
Forms have been around since the web 1.0 days, but it's still surprising how many developers use form elements incorrectly or in ways that slow down users. This guide when used with the forms documentation will help you design great forms.
Forms should be one column
Top align labels
Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Placing labels above inputs and form fields reduces completion time for filling out forms.
Don't use placeholder text as a label
Never use only placeholder text as a label if you can possibly avoid it. That's not what placeholder text is for. The HTML5 spec specifically advises against this because it creates a couple problems:
- Placeholder text disappears as soon as the user starts typing. This makes it hard to go back to a previously completed form, or to revise a field you already filled out.
- Screen reader support for placeholder text is inconsistent.
The only exception to this might be a search form with one input. If there is a visual affordance like a search icon and you add an
aria-label, users will most likely understand the purpose of the input.
Put text inputs inside labels
<label> Email <input type="text" placeholder="email@example.com"> </label>
This is not the only way to accomplish proper labels, but it's the easiest, and it's the way we structure labels in Cacite Web.
This approach is good for a few reasons:
- Accessible for screen readers by default
- Easier to type, no
- You get Calcite Web's vertical spacing for free
We recommend putting inputs inside labels because it makes it easier, but whether you use this method or the more traditional
id attributes, it is very important to link labels and inputs together.
Group related information
If you have a long form with lots of fields, it's important to break it up and organize it for your users. This helps your users focus on smaller, more manageable tasks, increasing conversions and decreasing completion times. You can also use the
group role to help users utilizing screen readers.
Denote optional fields
Denoting optional fields decreases form completion time and is more clear and explicit than marking required fields with an asterisk. Red asterisks also compete visually with error messages (covered below).
Mark fields as successful
input-success class to form fields if they are valid. This helps users get feedback on what they've done correctly.
After submission, clearly indicate errors
It's very important to show users what went wrong if there are errors processing and validating the form. Errors should be specific, and shown inline with the form field that caused the problem. Use the
input-error-message classes to indicate the error in the form. Ensure that the error message is helpful and descriptive. For an example of form errors, see the form validation section of the Calcite Web documentation.