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

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Modifying Elements

Chetan Jaisinghani
Chetan Jaisinghani
2,896 Points

Input 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?

Hi Chetan,

This is the html from the project:

<p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>

Can you post what you changed that to?

I'll try to answer your questions if this is still unresolved for you.

4 Answers

Tim Larson
seal-mask
.a{fill-rule:evenodd;}techdegree
Tim Larson
Full Stack JavaScript Techdegree Student 13,696 Points

Hi 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
Chetan Jaisinghani
2,896 Points

var 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.

The <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.

No worries, I hope it helped

Chetan Jaisinghani
Chetan Jaisinghani
2,896 Points

Jason, I changed the label for to label id just to see what happens and what purpose does "for" solve that "id" cannot.