Labels (label and for)

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Labels (label and for)

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. Which attribute on <label> links it to an input?
A name
B for
2. True or false: the for value and the input id must match exactly (case-sensitive).
A True
B False
3. What happens when a user clicks a label linked to an input?
A Focus moves to the associated input
B The form is submitted
4. True or false: <LABEL> with capital letters is valid HTML.
A True
B False
5. Why is linking labels to inputs important for accessibility?
A Screen readers announce the label text when the input is focused
B It adds colour to the input field
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left columnRight column
1<label for="name">Full name</label> <input type="text" id="name"> A<label for="pass">Password</label> <input type="password" id="pass">
2<label for="agree">I agree</label> <input type="checkbox" id="agree"> B<label for="email">Email</label> <input type="email" id="email">
3The for attribute value must exactly match the input's id - the match is case-sensitive CAttribute names must be lowercase - 'For' should be written as 'for'
4Every visible form control should have an associated <label> for accessibility Dfor and id matching is case-sensitive - for="age" does not match id="AGE"
5<label For="city">City</label> <input type="text" id="city"> EThe label is linked to the input - for="name" matches id="name", so clicking the label focuses the input
6<label for="age">Age</label> <input type="number" id="AGE"> FClicking the label text also checks or unchecks the checkbox - for/id linking is especially useful for small controls
C

Definitions

for
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<_____ for="name">Your name</label>
2.
<label for="email">Email</_____>
3.
<label for="user">User</label> <input type="text" __="user">
4.
<label for="____">Password</label> <input type="password" id="pass">
5.
<_____ for="city">City</label> <input type="text" id="city">
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <LABEL for="name">Name</LABEL>
B <input type="text" id="name">
C <button>Submit</button>
Question 2
A <form>
B <label For="email">Email</label>
C <input type="email" id="email">
D </form>
Question 3
A <form>
B <label for="user">Username</label>
C <input type="text">
D <button>Login</button>
E </form>
Question 4
A <form>
B <label For="pass">Password</label>
C <input type="password" id="pass">
D </form>
Question 5
A <form>
B <label for="a">First</label>
C <input type="text" id="a">
D <label for="b">Last</label>
E <input type="text" id=b>
F </form>

Answer Key

Labels (label and for)
Section A: Quick Questions
Q1
B — for
Q2
A — True
Q3
A — Focus moves to the associated input
Q4
B — False
Q5
A — Screen readers announce the label text when the input is focused
Section B: Match the Pairs
Q1
<label for="name">Full name</label> <input type="text" id="name"> → The label is linked to the input - for="name" matches id="name", so clicking the label focuses the input
Q2
<label for="agree">I agree</label> <input type="checkbox" id="agree"> → Clicking the label text also checks or unchecks the checkbox - for/id linking is especially useful for small controls
Q3
The for attribute value must exactly match the input's id - the match is case-sensitive → <label for="email">Email</label> <input type="email" id="email">
Q4
Every visible form control should have an associated <label> for accessibility → <label for="pass">Password</label> <input type="password" id="pass">
Q5
<label For="city">City</label> <input type="text" id="city"> → Attribute names must be lowercase - 'For' should be written as 'for'
Q6
<label for="age">Age</label> <input type="number" id="AGE"> → for and id matching is case-sensitive - for="age" does not match id="AGE"
Section C: Definitions
Q1
for — The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.
Section D: Fill in the Blanks
Q1
<label for="name">Your name</label>
Q2
<label for="email">Email</label>
Q3
<label for="user">User</label> <input type="text" id="user">
Q4
<label for="pass">Password</label> <input type="password" id="pass">
Q5
<label for="city">City</label> <input type="text" id="city">
Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <LABEL> and </LABEL> should be <label> and </label>.
Q2
B — Attribute names must be lowercase. 'For' should be written as 'for': for="email".
Q3
C — The input is missing the id attribute that matches the label's for value. Add id="user" to link them.
Q4
B — Attribute names must be lowercase. 'For' should be written as 'for': for="pass".
Q5
E — The id attribute value must be in double quotes: id="b", not id=b without quotes.