HTML · The document layer
How do you connect labels to form controls?
Short answer
Every form control needs an accessible name. Use a label with a matching for and id, or wrap the control in the label, rather than relying on placeholder text.
A label does more than display text. It gives the control its accessible name and, when associated correctly, clicking the label focuses or toggles the control.
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" />
<label>
<input type="checkbox" name="newsletter" />
Send me product updates
</label>Rules that prevent common bugs
- The for value must match the control's id exactly
- Ids must be unique on the page
- A placeholder is a hint, not a label; it disappears when typing and has poor contrast
- Group related radio buttons in a fieldset with a legend
- Give icon-only buttons an accessible name through text, aria-label or visually hidden text
Labels should be visible and close to the control. Hiding a label entirely can be valid when the design calls for it, but the accessible name still needs to exist.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Is a placeholder an acceptable label?
- 2How do you label a group of radio buttons?
- 3What is the difference between for and wrapping a control?
- 4How do you name an icon-only button?
Say it in the interview
Every control needs an accessible name. I usually use a label with a for attribute that matches the input id, or wrap the input inside the label. A placeholder is only a hint and is not a substitute because it disappears and often has weak contrast. For groups like radio buttons I use fieldset and legend, and for icon-only buttons I add visually hidden text or an aria-label.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.