Forms
The examples on this page show how we manage forms and their fields. Recommendations are based on this excellent blog post by Adam Silver.
- Every input needs a label. Put labels above the input.
- Do not use the
placeholderattribute on<input>fields. - If hint text is needed, add a
<div class="field-description>inside the<label>. Add hint text when users are more likely to make a mistake, like when having to satisfy a complex set of password rules. Error messages should be a last resort. - Make form fields look like form fields: apply a border and make sure they are empty to begin with. A height of 44px or more makes them easy to tap on touch screen devices.
- Make sure any
<button>looks like a button. Align them to the left edge of the last input where users naturally look for them. Use a verb for button text because the user is doing something, and relate it to what they are doing - avoid generic ‘Submit’ buttons. <select>should be a last resort as they’re really hard to use. Try radio buttons instead. Or use an autocomplete, if there’s a long list of options.- If you have to use a
<select>, don't submit a form when its value changes. Select boxes that submit the form automatically when the user selects an option cause problems for keyboard and screen reader users. - We use Parsley, a JavaScript library, to handle client-side form validation. Using Parsley, we also add the interactive parts and the ARIA attributes to make form completion as easy as possible for people.