Web forms that people actually submit
The broken versions
Every form on this page has mistakes on purpose, so you can see what they do. Each section explains what is wrong before its form starts. To pass a form, skip to the next heading.
This example runs in your browser. Nothing you type is sent anywhere.
Placeholders instead of labels
These three fields have no labels. The words you see are placeholders, and they disappear as soon as you type. A screen reader may announce each field only as an edit field.
A mask that fills the field before you type
The mask characters are written into the field itself, so the form thinks the field already has an answer. The label never moves out of the way and sits on top of the mask.
Vague errors, checked on every keystroke
This form complains while you are still typing, marks problems with a red border only, and says only Invalid input at the top of the form.
A button with no name that loses your work
The send button is an icon with no text, so a screen reader announces only button. Pressing it shows nothing while it works, and when the simulated connection fails, the form clears everything you typed.
A dark form that never told the browser
This dark area does not declare color-scheme, and its menu has no label. On many systems the menu arrow is dark gray on near-black, and a screen reader announces only a combo box.
A multi-step form that forgets
This form saves nothing. Fill in the first step, reload the page, and you start over.