Module 6: Forms · Lesson 2 of 7
HTML Label Tag: How to Connect a Label to an Input
All lessons in Module 6
Goal: Tie a label to every input with for and id.
Learn
A text box without a label is a mystery box. Its caption is a <label>, and that label has to be connected to the box. Sitting next to it is not enough. Give the input an id and give the label a matching for:
<label for="city">City</label> <input type="text" id="city" name="city">
Once they are connected, two things happen:
- Clicking the label puts the cursor in the box, so fingers and mice get a bigger target.
- When the box gets focus, a screen reader says "City, edit text" where it would otherwise say only "edit text".
Another way is to wrap the input inside the label, and then you need no id: <label>City <input></label>. Grey hint text inside a box doesn't count as a label. It vanishes the moment you start typing. The label element in the HTML standard (opens in a new tab) describes both ways of connecting.
The short version
- A
<label>is connected when itsforvalue matches the input'sid, or when it wraps the input. - Clicking a connected label focuses its input or ticks its checkbox, so the click target grows.
- Screen readers announce the label as the input's name, and the field makes sense by itself.
- Placeholder text is a hint. It disappears the moment the visitor types, so it can't do a label's job.
Example
<form>
<label for="city">City</label>
<input type="text" id="city" name="city">
<button>Go</button>
</form>Your task
In this pizza form, the boxes only have loose text beside them. Replace it with connected labels:
- Turn
Your nameinto a<label>withfor="name", and give the first inputid="name". - Turn
Delivery addressinto a<label>withfor="address", and give the second inputid="address".
To check, click the text of a label. The cursor should land in its box.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<input type="text" name="address" placeholder="Delivery address">Right
<label for="address">Delivery address</label>
<input type="text" id="address" name="address">Placeholders vanish when typing starts and are often pale grey, so visitors can forget what the box was asking for.
Wrong
<label for="name">Your name</label>
<input type="text" id="name" name="name">
<label for="name">Friend's name</label>
<input type="text" id="name" name="friend">Right
<label for="name">Your name</label>
<input type="text" id="name" name="name">
<label for="friend">Friend's name</label>
<input type="text" id="friend" name="friend">Each id may appear only once, and with a duplicate both labels point at the first input while the second box goes unlabelled.
Go deeper
Labels do far more than tidy up a form. WCAG success criterion 3.3.2, Labels or Instructions (opens in a new tab), requires every form control to have a programmatic label, and a missing label is among the errors automated checkers find most often on real websites. The label text becomes the control's accessible name. Voice-control users say that name to click it: "click Delivery address".
Browsers read labels as well. Autofill looks at labels, names and ids to guess which saved data goes where. The autocomplete attribute removes the guessing, for example autocomplete="name" or autocomplete="street-address".
Some designs show no visible label, like a search box beside a magnifier icon. The text should exist anyway. Keep the label and hide it visually with a CSS class, or, as a last resort, give the input an aria-label (see ARIA basics). Drop the label altogether and screen reader users are left guessing.
Short, specific label text works best. "Email" beats "Please enter your email address here", and extra instructions can go on a separate line below the field.
Frequently asked questions
How do I link a label to an input in HTML?
Give the input a unique id, then give the label a for attribute with exactly the same value: <label for="email">Email</label> <input id="email" name="email">. The match is case-sensitive. Test it by clicking the label text, and the cursor should jump into the box. The label reference page lists its attributes.
Can I use a placeholder instead of a label?
No. A placeholder disappears once someone types, so they can no longer check what the field was for, and many people struggle to read its pale grey text. Some assistive tools skip it entirely. The HTML standard's placeholder rules (opens in a new tab) say it must not replace a label. Use a real <label> every time, and let the placeholder show an example of the format, like [email protected].
Should I use for and id or put the input inside the label?
Either one makes a proper connection. Wrapping, as in <label><input type="checkbox"> Remember me</label>, is short and needs no id, so you see it a lot on checkboxes and radios. With for and id, the label and input can sit in different places, which helps with layouts. Plenty of developers do both at once for the widest support. The accessibility module comes back to this in label for and id.
