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.

Practice

1. What is the main purpose of using a <label> element in HTML forms?

easy

A. To create a clickable button

B. To style the input fields with colors

C. To submit the form data to the server

D. To connect a text description to a form input for better accessibility

Solution

1. Step 1: Understand the role of <label>

   The <label> element provides a text description for form inputs, making it easier for users to know what to enter.

2. Step 2: Recognize accessibility benefits

   Labels improve accessibility by linking text to inputs, helping keyboard and assistive technology users.

3. Final Answer:

   To connect a text description to a form input for better accessibility -> Option D

4. Quick Check:

   Label connects text and input = A [OK]

Hint: Labels link text to inputs for accessibility [OK]

Common Mistakes:

• Thinking labels style inputs
• Confusing labels with buttons
• Assuming labels submit forms

2. Which of the following is the correct way to associate a <label> with an <input> element using the for attribute?

easy

A. <label for='name'>Name</label><input type='text' id='name'>

B. <input type='text' id='name'><label>Name</label>

C. <label>Name<input type='text' id='name'></label>

D. <label>Name</label><input type='text'>

Solution

1. Step 1: Check for matching for and id

   The label's for attribute must match the input's id to associate them.

2. Step 2: Verify syntax correctness

   <label for='name'>Name</label><input type='text' id='name'> uses for='name' on label and id='name' on input, correctly linking them.

3. Final Answer:

   <label for='name'>Name</label><input type='text' id='name'> -> Option A

4. Quick Check:

   Label's for = input's id [OK]

Hint: Match label's for with input's id exactly [OK]

Common Mistakes:

• Missing for attribute on label
• Input missing id attribute
• Placing label after input without for/id

3. What will happen when a user clicks on the text 'Email' in this code?

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

medium

A. Nothing happens because label and input are separate

B. The form will submit immediately

C. The input field with id 'email' will be focused (cursor placed inside)

D. An error will appear in the browser

Solution

1. Step 1: Understand label's for attribute effect

   Clicking label text focuses the input with matching id.

2. Step 2: Apply to given code

   Label's for='email' matches input id='email', so clicking 'Email' focuses that input.

3. Final Answer:

   The input field with id 'email' will be focused (cursor placed inside) -> Option C

4. Quick Check:

   Click label text = focus input [OK]

Hint: Clicking label focuses linked input [OK]

Common Mistakes:

• Thinking label click submits form
• Assuming label click does nothing
• Confusing label with button behavior

4. Identify the error in this code snippet:

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

medium

A. The input type should be 'username' instead of 'text'

B. The label's for attribute does not match the input's id

C. The label should wrap the input element

D. The input is missing a name attribute

Solution

1. Step 1: Compare label's for and input's id

   Label uses for='username' but input's id='user', so they don't match.

2. Step 2: Understand association requirement

   For label to link input, for and id must be identical.

3. Final Answer:

   The label's for attribute does not match the input's id -> Option B

4. Quick Check:

   for must equal id [OK]

Hint: for and id must be identical to link label and input [OK]

Common Mistakes:

• Ignoring mismatch between for and id
• Thinking name attribute affects label linking
• Assuming wrapping input is always required

5. You want to create a form with two checkboxes labeled 'Subscribe' and 'Accept Terms'. Which code correctly associates each label with its checkbox for best accessibility?

hard

A. <label>Subscribe<input type='checkbox' id='subscribe'></label>
<label>Accept Terms<input type='checkbox' id='terms'></label>

B. <input type='checkbox'><label for='subscribe'>Subscribe</label>
<input type='checkbox'><label for='terms'>Accept Terms</label>

C. <label for='subscribe'>Subscribe</label><input type='checkbox'>
<label for='terms'>Accept Terms</label><input type='checkbox'>

D. <label><input type='checkbox' id='subscribe'>Subscribe</label>
<label for='terms'>Accept Terms</label>
<input type='checkbox'>

Solution

1. Step 1: Understand two ways to associate labels

   Labels can link inputs by wrapping them or using for/id matching.

2. Step 2: Check each option for correct association

   <label>Subscribe<input type='checkbox' id='subscribe'></label> <label>Accept Terms<input type='checkbox' id='terms'></label> wraps each input inside its label, ensuring correct association without needing for/id.

3. Final Answer:

   <label>Subscribe<input type='checkbox' id='subscribe'></label> <label>Accept Terms<input type='checkbox' id='terms'></label> -> Option A

4. Quick Check:

   Wrap input inside label or match for/id [OK]

Hint: Wrap input in label or match for and id [OK]

Common Mistakes:

• Using for without matching id
• Placing label after input without for
• Not associating label and input at all