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
inputmodeattribute - Good form elements leverage the
autocompleteattribute - 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.onLinebefore attempting a submit - Good forms start with
accent-colorfor 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.
- Form Design Patterns by Adam Silver
- Web Form Design by Luke Wroblewski
- Form Design Mastery by Adam Silver
- Better Onboarding by Krystal Higgins