Label association in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use with form controls?

What is the main benefit of associating a element with a form input using the for attribute?

A It improves accessibility by linking the label to the input, allowing screen readers to identify the input purpose.

B It hides the input element from the page.

C It automatically submits the form when the label is clicked.

D It changes the color of the input when the label is clicked.

💡 Hint

Think about how users with screen readers understand form fields.

Associating a label with an input using the for attribute helps screen readers announce the label text when the input is focused, improving accessibility.

📝 Syntax

intermediate

Correct label association syntax

Which HTML snippet correctly associates the label with the input using the for attribute?

HTML

<label for="username">Username:</label>
<input type="text" id="username" name="username">

A

<label>Username:
  <input type="text" id="username" name="username">
</label>

B

<label id="username">Username:</label>
<input type="text" for="username" name="username">

C

<label for="user">Username:</label>
<input type="text" id="username" name="username">

D

<label for="username">Username:</label>
<input type="text" id="username" name="username">

💡 Hint

The label's for attribute must match the input's id exactly.

The label's for attribute should match the input's id to create a proper association. Option D nests input inside label which is valid but does not use for attribute.

❓ rendering

advanced

What happens when clicking a label?

Given this HTML, what happens visually or functionally when the user clicks on the text 'Email Address'?

HTML

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

A The cursor moves to the email input field, allowing the user to start typing immediately.

B Nothing happens because labels are not clickable.

C The form is submitted automatically.

D The label text changes color but input is not focused.

💡 Hint

Think about how labels improve user experience when interacting with forms.

Clicking a label linked with for attribute focuses the associated input, making it easier to fill forms.

❓ selector

advanced

CSS selector for styling associated labels

Which CSS selector correctly styles only the elements that are associated with an element by matching the for attribute to the input's id?

A label:has(+ input) { color: blue; }

B label[for] { color: blue; }

C label[for="email"] { color: blue; }

D input + label { color: blue; }

💡 Hint

Look for a selector that targets labels with a for attribute regardless of input position.

label[for] selects all label elements that have a for attribute, which means they are associated with an input by id. Option B targets only one specific id, B targets labels immediately after inputs, A is invalid because :has() cannot select previous siblings.

❓ accessibility

expert

Accessibility issue with missing label association

What is the main accessibility problem with this HTML snippet?

HTML

<label>Email Address</label>
<input type="email" name="email">

A The label text will not be visible on the page.

B The input field will not accept any text input.

C Screen readers cannot associate the label text with the input field, making it unclear what the input is for.

D The form will not submit when pressing Enter.

💡 Hint

Think about how assistive technologies identify form fields.

Without a for attribute on the label or nesting the input inside the label, screen readers cannot link the label text to the input, reducing accessibility.