Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Using <label> and for Attribute | Organizing and Structuring Form Controls
HTML Forms Foundations

bookUsing <label> and for Attribute

The <label> element connects text descriptions to form controls. Using the for attribute, you link the label directly to an input's id. This makes forms easier to use, especially for people using assistive technologies like screen readers. When you provide explicit labels, everyone benefits from improved usability, including users with disabilities who rely on clear associations between form fields and their descriptions.

index.html

index.html

style.css

style.css

copy

Screen readers announce labels when users focus on inputs, helping visually impaired users understand the purpose of each field. Proper labeling also increases the clickable area—when you click a label, the corresponding input receives focus. This makes forms easier to use on mobile devices, where precise tapping can be difficult.

Avoid common pitfalls when labeling form controls. Always use unique id values for each input. The for attribute of a label must match the id of its associated input. Never rely solely on placeholder text to describe a field, as placeholders disappear when users start typing and are not always accessible to screen readers.

question mark

Which approach best demonstrates proper use of the <label> element and for attribute to ensure accessibility in forms?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 10

bookUsing <label> and for Attribute

Veeg om het menu te tonen

The <label> element connects text descriptions to form controls. Using the for attribute, you link the label directly to an input's id. This makes forms easier to use, especially for people using assistive technologies like screen readers. When you provide explicit labels, everyone benefits from improved usability, including users with disabilities who rely on clear associations between form fields and their descriptions.

index.html

index.html

style.css

style.css

copy

Screen readers announce labels when users focus on inputs, helping visually impaired users understand the purpose of each field. Proper labeling also increases the clickable area—when you click a label, the corresponding input receives focus. This makes forms easier to use on mobile devices, where precise tapping can be difficult.

Avoid common pitfalls when labeling form controls. Always use unique id values for each input. The for attribute of a label must match the id of its associated input. Never rely solely on placeholder text to describe a field, as placeholders disappear when users start typing and are not always accessible to screen readers.

question mark

Which approach best demonstrates proper use of the <label> element and for attribute to ensure accessibility in forms?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2
some-alt