Detailed explanation
The HTML <label> element provides a caption for a form control, such as an input, select, or textarea. It tells users what information to enter or what an option means. Unlike nearby plain text, an associated label creates a relationship that browsers and assistive technologies can recognise. Screen readers typically announce the label when users reach the control, helping them understand its purpose without relying on visual layout. Labels also improve usability: clicking or tapping a label generally focuses its associated text field or activates its checkbox or radio button, creating a larger interaction target.
The most explicit association uses the label's for attribute and the control's id attribute: <label for="email">Email</label><input id="email" type="email">. The two values must match exactly, and the id must be unique within the document. The browser uses this connection even when the label and control are not adjacent in the markup. The input's name attribute is not used for label association; it identifies the field when form data is submitted. Keeping these roles separate is an important beginner interview point.
You can also create an implicit association by placing the control inside the label: <label>Email <input type="email"></label>. This works without an id or for attribute because the nesting establishes the relationship. Explicit association is often preferred because it allows more flexible layouts and makes the connection easy to inspect. Both approaches are valid for ordinary HTML forms. If you use both nesting and for, the for value should reference the nested control's id. Each label should identify one control; use fieldset and legend to describe a related group, such as several radio buttons.
A placeholder is not a replacement for a label: it disappears as users type and does not establish the same semantic relationship. Use it for a brief example or hint instead. Similarly, styling nearby text to look like a label does not connect it to the input. Interviewers usually expect you to explain the accessibility benefit, demonstrate both association methods, and distinguish id from name. A useful practical check is to click the label and confirm that the intended control receives focus or changes state.
Key points to remember
- <label> gives a form control a caption and contributes to its accessible name.
- Explicit association requires the label's for value to match the control's unique id.
- Implicit association is created by nesting the control inside the label.
- Clicking a label generally focuses or activates its associated control.
- Use visible labels for field purposes, placeholders for hints, and fieldset with legend for groups.
Common mistakes candidates make
- Matching for to the input's name instead of its id, or reusing the same id for multiple inputs.
- Using a placeholder or nearby plain text as the only substitute for an associated label.
- Putting multiple controls or unrelated interactive elements, such as links, inside one label.
Likely follow-up questions
What is the difference between an input's id and name attributes?
The id uniquely identifies the element in the document and enables explicit label association. The name identifies the field in submitted form data; related radio buttons share a name but need distinct ids for their individual labels.
Can aria-label replace a <label> element?
aria-label can provide an accessible name when no suitable visible label is available. However, it does not display text or create a clickable label area, so a native visible label is generally preferable for ordinary form fields.
How should a group of radio buttons be labelled?
Give each radio button its own associated label describing that option. Wrap the related buttons in a fieldset and use legend for the group question or description.
Interview tip: Explain the accessibility and click-target benefits first, then show both association methods and explicitly state that for matches id, not name.