Form best practices

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 titlearia-label, or visually hidden label that will be still read by assistive technology.
  • When applicable, use autocomplete.
  • Use fieldset and legend elements with form groups like radios and checkboxes.
  • Remember to define type attribute on button elements (don’t rely only on JavaScript).
  • 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>

Further reading

Newsletter

Level up your skills with useful UX, web development, and productivity tips via e-mail.

Comments

If you have any thoughts, please contact me on LinkedIn or see the contact page for more options.