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.
<form>
  <!-- Label and placeholder example. -->
  <label for="email-01">E-mail</label>
  <input id="email-01" name="email-01" placeholder="user@domain.com" 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>

Further reading

Newsletter

Level up your skills with useful web development & UX tips via e-mail.

Comments

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