A label tells users what an input means and provides an accessible name. Associate it explicitly or wrap the input in the label.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A visible Email label targets the input’s unique ID. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Give the field a name
Create a stable visible label explaining the value being requested.
Step 2: Associate it explicitly
Match the label’s for attribute to the input’s unique id. Duplicate IDs break predictable association.
Step 3: Connect supporting messages
Use aria-describedby for help and current errors without replacing the label itself.
Worked scenario
A visible Email label targets the input’s unique ID.
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-help">
<p id="email-help">Use the address you check regularly.</p>Clicking the label focuses the input. Help supplements the field name; placeholder text should not carry the only instruction because it disappears once typing starts.
Common mistake
A placeholder disappears during typing and should not be the only label.
Verify the behavior
Click the label, inspect the accessible name and description, and type until any placeholder disappears. The field should remain understandable.
Interview exercise
Explain help and error relationships.
Answer and reasoning
Keep the label stable and connect help or error text through appropriate described-by relationships.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.