Forms and inputs
How to ask people questions: labels, the right box for each answer, checks the browser does for you, and how the answers reach you.
By the end you can
- Label every box so everyone knows what to type
- Pick the right kind of box for each answer
- Let the browser check the form before it is sent
- Group choices, and send the answers to the right place
Easier if you did first
step 1 of 5
Labels, and why grey text is not one
A form is a list of questions. Every box needs its question written next to it. That question is a <label>.
You join a label to its box with two attributes. The box gets id="name". The label gets for="name". They must match exactly, like two halves of a ticket.
Joining them does two useful things. A screen reader reads the question out when the person reaches the box. And tapping the words focuses the box, which gives thumbs a much bigger target on a phone.
Now the trap. Many sites skip labels and put grey text inside the box instead. That grey text is called a placeholder, and it disappears the moment you start typing.
Picture filling in a form where the questions vanish as you answer them. You look up, see five filled boxes, and cannot remember which one was the phone number. That is what a placeholder-only form does to people.
The two boxes on the right have grey text and no labels. Fix them.
<label for="name">Your name</label>
<input id="name" type="text" name="name" />
the for and the id must match exactlyWhat these words mean
- form
- The block that holds the questions and sends the answers.
- input
- A box someone types in.
- label
- The question written beside a box.
- for
- On a label: the id of the box it belongs to.
- id
- A name for one element. No two elements on a page may share one.
- name
- The label on the answer when it is sent to you. No name means the answer is not sent.
- placeholder
- Faint example text inside a box. A small extra hint, never the question itself.
Easy to get wrong
<input placeholder="Your name" />
<label for="name">Your name</label><input id="name" name="name" />
The question disappears as soon as someone types, and some screen readers say nothing at all for this box.
Two boxes both with id="email"
Different ids: email and email2
An id has to be unique. When two share one, the label points at the wrong box, and so does any code you write later.
What we check
- Both fields have a label with for
- Every label's for matches a real input id
- Both inputs have a name so they get submitted
- The labels have readable text