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?

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:

1 Like

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