Cat App step 56 question

Hello! I am not sure if this is the correct place to ask this, but I am on step 56 of the cat app tutorial and it took me many tries to get right. I seem to have gotten the code correct now but I am unsure of what I actually am doing with that code.

It says that it’s another way to associate an input element’s text with the element itself, but looking through my notes I can’t seem to find the first way.

Also, what are the benefits of one way vs. the other?

Also also, what exactly is the purpose of associating the input of an element’s text with the element itself?

1 Like

Hey lauren, if you want to learn the why behind why we use labels, I’ve already created a post and I would recommend reading that first.

As for the two ways you can associate an input with a label.

  1. Just “nest” (put inside) the input element that you want to add a label to, inside of a label element. Example:
<label> name <input /> </label>
  1. The second way is to use the label element’s for tag. Just use an input element’s id as the value for the label’s for attribute. Example:
<label for="name">Name</label>
<Input id="name" />

if you click on a label beside an input and the input gets “triggered” (you can type into it even if you haven’t directly clicked on the input yet) then that means that label is connected to that input.

Feel free to ask any more questions you might have.

Hope this helps :smile:

3 Likes

Thank you! This was very helpful, as was the article you posted a link to in the post you shared. It makes a lot more sense now!

1 Like

I found the wording and expectation for this step a bit awkward, e.g., if a label is preferred here, though it doesn’t really simplify anything in this context, it would seem more practical to nest the input within it, and even less evident if not nested to place the label adjacent to and following its input. This was the first step in this entire set that tripped me up. Thanks for this explanation.

1 Like