Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Ajay Prasannan
Ajay Prasannan
16,002 Points

Wanted to check: shouldn’t the for attribute of a label match the id attr of the related input when they’re not nested?

See the MDN docs about this:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

1 Answer

clion
clion
6,614 Points
clion
clion
6,614 Points

Normally yes. As is stated at the link you provided: To associate the <label> with an <input> element, you need to give the <input> an id attribute. Then you give the <label> a "for" attribute whose value is the same as the input's id.

This way you explicitly associate the form control with the label. Do it this way creates a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.

The only time you might not do it that way is when the labels for the elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button). I found examples of this for you at: https://www.w3.org/TR/WCAG20-TECHS/H44.html: Submit and Reset buttons ( input type="submit" or input type="reset")

Image buttons ( input type="image")

Hidden input fields ( input type="hidden")

Script buttons (button elements or <input type="button">)