Labels and placeholders in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The <label> element describes a form control, making it easier for users and assistive technologies to understand what input is expected. It improves accessibility and usability.

beginner

How does the <label> element associate with an input field?

You can link a <label> to an input by using the 'for' attribute with the input's id, or by wrapping the input inside the <label> element.

beginner

What is a placeholder attribute in an input field?

The placeholder attribute shows a short hint inside the input box to guide users on what to enter. It disappears when the user starts typing.

intermediate

Why should you not rely only on placeholders instead of labels?

Placeholders disappear when typing and may not be read by screen readers, so labels are essential for accessibility and clarity.

intermediate

How do labels improve keyboard navigation?

Clicking a label focuses the associated input, making it easier to select fields without using a mouse, which helps keyboard users.

Which attribute links a <label> to an input field?

A id

B name

C for

D placeholder

The 'for' attribute on a matches the input's 'id' to associate them.

What happens to placeholder text when you start typing in the input?

A It stays visible

B It moves below the input

C It turns bold

D It disappears

Placeholder text disappears as soon as the user types in the input field.

Why are labels important for screen readers?

A They provide descriptive text for inputs

B They make inputs bigger

C They add color

D They hide inputs

Labels give screen readers the text to announce what the input is for.

Which is a correct way to associate a label with an input?

A <label>Email<input></label>

B Both B and C

C <label for='email'>Email</label><input id='email'>

D Neither B nor C

Both linking with 'for' and wrapping input inside label are valid methods.

Can placeholders replace labels for accessibility?

A No, labels are needed

B Yes, always

C Only on mobile

D Only for passwords

Labels are necessary for accessibility; placeholders alone are not enough.

Explain how to properly use labels and placeholders in a form for best accessibility.

Think about how users and assistive tools understand form fields.

Describe the difference between a label and a placeholder and why both are important.

Consider what happens when you start typing and how screen readers work.