This content originally appeared on daverupert.com and was authored by daverupert.com
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.
- Form Design Patterns by Adam Silver
- Web Form Design by Luke Wroblewski
- Form Design Mastery by Adam Silver
- Better Onboarding by Krystal Higgins
This content originally appeared on daverupert.com and was authored by daverupert.com
daverupert.com | Sciencx (2024-09-13T13:25:00+00:00) Good forms. Retrieved from https://www.scien.cx/2024/09/13/good-forms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.