Cat App step 56 question

[lepierce3]

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?

[staranbeer]

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.

Learn HTML by Building a Cat Photo App - Step 56

In HTML its actually a best practice to associate a “name” with your input element so users know what to type in an input box. [Screenshot_20221015-162952_Chrome] In the above example a user can clearly see that theyre supposed to ented a first name. Its also really important for accessibility since I think placeholder text isnt read out loud by screen reader (equipment used by visually impaired people in the case of blindness, partial blindness or color blindness). This is where the label…

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>

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

[lepierce3]

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!

[deesto]

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.

[tihop96]

Sorry it wont let us type the answer out

[staranbeer]

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.