Forms are everywhere. They are the basic elements that users interact with. In this post, you can find some bullet points regarding the best practices in designing and developing forms.
- Form elements (input, button, textarea, etc.) should have text labels. Along with the accessibility benefits, UX research shows that forms with labels cause less cognitive load and are easier and faster to complete. It also makes it easier to click the input, because the whole area is clickable.
- The placeholder should not be considered as a label alternative. Good use case for a placeholder is a value example (see what research says).
- If you have good reasons to skip visible text labels, make sure the fields are accessible using alternative methods like
aria-label, or visually hidden
labelthat will be still read by assistive technology.
- When applicable, use autocomplete.
legendelements with form groups like radios and checkboxes.
- Remember to define
- Look for opportunities to enhance the user experience with better form controls.
- Read more about advanced form labeling.
<form> <!-- Label and placeholder example. --> <label for="email-01">E-mail</label> <input id="email-01" name="email-01" placeholder="firstname.lastname@example.org" autocomplete="email"> <!-- Form group example (fieldset, legend). --> <fieldset> <legend>Select your preferred option</legend> <p> <input type="radio" name="option" id="option-1" value="option-1"> <label for="option-1">Option 1</label> </p> <p> <input type="radio" name="option" id="option-2" value="option-2"> <label for="option-2">Option 2</label> </p> <p> <input type="radio" name="option" id="option-3" value="option-3"> <label for="option-3">Option 3</label> </p> </fieldset> <!-- Submit is a default type of a button, but define it anyway for consistency with other types. --> <button type="submit">Send the form</button> </form>
Level up your skills with useful web development & UX tips via e-mail.