← HTML & CSS

Labels (label and for)

The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.

Part of: HTML and CSS Journey — Module 29

Understanding Labels (label and for) in HTML & CSS

What it does: Both for and id hold the value 'email'. If they differ - even in case - the label and input are not linked. The label describes the purpose of the password field. Screen readers announce 'Password' when the input receives focus. The for attribute holds the id of the target input. 'name' is an attribute on inputs, not labels. HTML tag names must be lowercase. <LABEL> is non-standard - use <label>. Checkboxes are small and hard to click. A linked label means the user can click the text to toggle the box.

Common mistakes: HTML tag names must be lowercase. <LABEL> and </LABEL> should be <label> and </label>. Attribute names must be lowercase. 'For' should be written as 'for': for="email".

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Labels (label and for) to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

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

forname

Matches

↓

Attribute names must be lowercase - 'For' should be written as 'for'

Applying

Meanings

Term

for

Meaning

The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.

Practice

Testing

Gaps

< for="name">Your name</label>

Check Answer

Spots

1<LABEL for="name">Name</LABEL>

2<input type="text" id="name">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which attribute on <label> links it to an input?

A. name

B. for ✓

The for attribute holds the id of the target input. 'name' is an attribute on inputs, not labels.

2. True or false: the for value and the input id must match exactly (case-sensitive).

A. True ✓

B. False

for/id matching is case-sensitive. for="Email" does not match id="email" - they must be identical.

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

Clicking a linked label focuses and activates the input, making it easier to click small controls like checkboxes.

4. True or false: <LABEL> with capital letters is valid HTML.

A. True

B. False ✓

HTML tag names must be lowercase. <LABEL> is non-standard - use <label>.

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

Screen readers use the label text to describe the input to visually impaired users. Without a label, the purpose of the field is unclear.

Match the Pairs

<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

<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

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">

Every visible form control should have an associated <label> for accessibility → <label for="pass">Password</label> <input type="password" id="pass">

<label For="city">City</label> <input type="text" id="city"> → Attribute names must be lowercase - 'For' should be written as 'for'

<label for="age">Age</label> <input type="number" id="AGE"> → for and id matching is case-sensitive - for="age" does not match id="AGE"

Key Term

for

The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.

Fill in the Blanks

1. <label for="name">Your name</label>

Hint: Type the element name used to provide a visible text label for a form control

2. <label for="email">Email</label>

Hint: Type the element name for the closing tag of a label

3. <label for="user">User</label> <input type="text" id="user">

Hint: Type the attribute name on the input that must match the label's for value

4. <label for="pass">Password</label> <input type="password" id="pass">

Hint: Type the id value that this label's for attribute must match exactly

5. <label for="city">City</label> <input type="text" id="city">

Hint: Type the element name that wraps visible label text for a form control

Spot the Error

Question 1

A <LABEL for="name">Name</LABEL>

B <input type="text" id="name">

C <button>Submit</button>

Line A — HTML tag names must be lowercase. <LABEL> and </LABEL> should be <label> and </label>.

Question 2

A <form>

B <label For="email">Email</label>

C <input type="email" id="email">

D </form>

Line B — Attribute names must be lowercase. 'For' should be written as 'for': for="email".

Question 3

A <form>

B <label for="user">Username</label>

C <input type="text">

D <button>Login</button>

E </form>

Line C — The input is missing the id attribute that matches the label's for value. Add id="user" to link them.

Question 4

A <form>

B <label For="pass">Password</label>

C <input type="password" id="pass">

D </form>

Line B — Attribute names must be lowercase. 'For' should be written as 'for': for="pass".

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>

Line E — The id attribute value must be in double quotes: id="b", not id=b without quotes.

Student with a class code? Join your class →