Brian LeRoux posted a few thoughts about forms and the idea of a “good form” resonated with me so I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list.

  • Good forms work without client JavaScript (Brian LeRoux)
  • Good forms always submit (Brian LeRoux)
  • Good forms remember values and display problems inline (Brian LeRoux)
  • Good login forms work with password managers (Mingo Hogan)
  • Good forms use a <form> tag
  • Good forms use appropriate input types
  • Good forms have clear labelled inputs and buttons
  • Good forms have focus states
  • Good forms have logical tab order
  • Good forms allow paste
  • Good form elements leverage the inputmode attribute
  • Good form elements leverage the autocomplete attribute
  • Good search forms wrap the <form> tag in a <search> element
  • Good forms can be reset with a <button type=reset>
  • Good forms participate in formData
  • Good forms don’t use placeholder as a label
  • Good forms work on phones
  • Good forms don’t popup and ask for personal information
  • Good forms only ask for what is necessary and aren’t too long
  • Good forms use HTTPS
  • Good forms use the proper HTTP verbs
  • Good forms validate on the client AND on the server
  • Good forms have been driven with a screen reader before going to production
  • Good forms clearly denote required attributes
  • Good forms warn about costly or destructive actions
  • Good forms make the baby Jesus smile
  • Good authenticated forms should have a server-generated nonce value
  • Good forms should do a pre-flight check for navigator.onLine before attempting a submit
  • Good forms start with accent-color for styling and only get more complex if necessary
  • Good forms see custom controls as a radioactive asset that must be removed at the earliest opportunity

Anyways. People should talk about forms more. Here’s some more resources on good form design.