Label association in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <label> element in HTML forms?

The <label> element connects text to a form control, making it easier for users to understand what input is expected and improving accessibility.

beginner

How do you associate a <label> with an <input> using the for attribute?

Set the for attribute on the <label> to match the id of the <input>. This links the label to the input so clicking the label focuses the input.

intermediate

Can a <label> wrap an <input> element? How does this affect association?

Yes, wrapping an <input> inside a <label> automatically associates them without needing the for attribute. Clicking the label focuses the input.

beginner

Why is label association important for accessibility?

Screen readers use label associations to read out what input fields are for, helping users with disabilities understand and fill forms correctly.

beginner

What happens if a form input has no associated label?

Users may find it hard to know what to enter, and assistive technologies may not describe the input properly, causing confusion and poor user experience.

Which attribute on the <label> element links it to an <input>?

A for

B id

C name

D type

The for attribute on matches the id of the input to create the association.

What happens when you click on a label associated with a checkbox?

A Nothing

B The page reloads

C The form submits

D The checkbox toggles

Clicking a label linked to a checkbox toggles the checkbox, improving usability.

Which of these is a valid way to associate a label with an input?

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

B Both B and C

C <label>Username<input type='text'></label>

D Neither B nor C

Both wrapping the input inside the label and using the for/id attributes correctly associate the label and input.

Why should every form input have a label?

A To improve accessibility and usability

B To prevent form submission

C To increase page load speed

D To make the form look colorful

Labels help users and assistive technologies understand form inputs, improving accessibility and usability.

If a label has for='email', what must the input have?

A class='email'

B name='email'

C id='email'

D type='email'

The input must have id='email' to link with the label's for attribute.

Explain how to properly associate a label with an input in HTML and why it matters.

Think about how clicking the label affects the input.

Describe the impact on users if form inputs do not have associated labels.

Consider users with disabilities and keyboard navigation.