Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen 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

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give an example of how to use the `<label>` element with an input?

Why is it important not to rely only on placeholder text for form fields?

What are some other accessibility best practices for forms?

Awesome!

Completion rate improved to 10

bookUsing <label> and for Attribute

Swipe um das Menü anzuzeigen

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

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2
some-alt