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
Chetan Jaisinghani
2,896 PointsInput for label
In this particular project, why is the input labels syntax like this:
<label for="new-task">
What does "for" stand for? Why isn't this a simple tag such as "id"? I don't get the difference here
I tried changing "for" to "id" and made relevant changes to the CSS stylesheet as well. The output was that when I added a new task to the list, it did not accept my input string ("Read a book") and rather displayed "undefined" in the incomplete list items. What is going on here?
4 Answers
Tim Larson
Full Stack JavaScript Techdegree Student 13,696 PointsHi Chetan!
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together; so it is important to remember that using id instead of label will return undefined in your code. In HTML each element has specific rules about the types of attributes you can apply to them, sometimes class/id will not apply properly.
For more information about the <label> tag visit this link: http://www.w3schools.com/tags/tag_label.asp Please mark as best if you found this answer sufficient :)
Good luck to you!
Chetan Jaisinghani
2,896 Pointsvar firstOfAll = "That was quick! Appreciate it!";
Although the link provides some kind of explanation for the "for" tag, it still isn't clear as to why we need the tag at all? I would give you points for the link but would not select it as the best answer. I was hoping for some detailed explanation.
Sergio Alen
26,726 PointsThe <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
Chetan Jaisinghani
2,896 PointsThanks for copy pasting
Sergio Alen
26,726 PointsNo worries, I hope it helped
Chetan Jaisinghani
2,896 PointsJason, I changed the label for to label id just to see what happens and what purpose does "for" solve that "id" cannot.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Chetan,
This is the html from the project:
Can you post what you changed that to?
I'll try to answer your questions if this is still unresolved for you.