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 HTML Forms Fieldsets and Labels

Nathan Brazil
PLUS
Nathan Brazil
Courses Plus Student 2,756 Points
Posted by Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points

Why do you need to give an element an id name for the label to work properly? Nick didn't really touch on this much.

I am just curious what is really going on behind the scenes. Is this the only and/or best way to associate the onscreen text of the label with the form element?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It binds it to it's label.

So when you have

<label for="name">Your Name</label>
<input type="text" name="name" id="name">

A screen reader knows that the label Your Name is associated with the input with an id of name, and if I clicked on the label "Your Name", my browser would auto focus on the input that is attached to it.

Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points
Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points

Thanks for the response. I already knew that just from watching the video. I think at the time I was wondering why it had to be an id specifically and was more interested what was going on behind the scenes. I felt like this method was somewhat limiting because I only can have one id per element and in this case you are stuck burning it just to link the label to an input element. But if the answer to my original question is nothing more than what you say I guess I'll accept that as an answer and keep trudging along.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Ahh gotcha. Specifically, this behavoir comes from the W3C. Specifically, here : http://www.w3.org/TR/html401/interact/forms.html#h-17.9

You can still use the id as a CSS selector or Javascript selector, or if you need multiple selectors, you could also use a class, or a CSS attribute selector.

Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points
Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points

Thanks so much! A lot of the times people can be so rude when I ask questions, like on stack overflow they will literally bitch at you for not checking All the information yourself before posting a question and I think that is like the worst thing to do to someone who is struggling who may want a direct answer instead of getting buried searching through even more material. Thanks for finding that page for me I read the whole thing and it makes sense.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You're welcome man. I just didn't realize you were asking for the source. I'm impressed you read the whole W3. It's not the easiest of reads, but it's the legitimate, actual source for "standards". I agree that Stack Overflow is not noob friendly, and that's quite sad really. We all started somewhere, I think too many people forget how difficult and overwhelming it was at the start. Glad I could help.