Using <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
style.css
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.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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
Using <label> and for Attribute
Glissez pour afficher le menu
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
style.css
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.
Merci pour vos commentaires !