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.
- Align the submit and cancel buttons to the left: submit first, cancel second (it works best, especially with left-aligned forms).
- Cancel button should have distinct design to avoid mistakes.
- On mobile it’s not clear which one should be first: in most cases submit first is ok. Sometimes it causes eyes to check the second button (e.g. cancel), and then go back to submit, while otherwise eyes go from top to bottom and when submit is the last, there is no need to see anything next, because it’s the final action. Other than that, both are fine.
<form> <!-- Label and placeholder example. --> <label for="email-01">E-mail</label> <input id="email-01" name="email-01" placeholder="[email protected]" 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> <!-- Optional secondary button (it should have different design than primary button). --> <button type="button">Cancel</button> </form>
Thanks for reading. If you liked it, consider sharing it with friends via:
Let's be in touch!
Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.