Learn HTML by Building a Cat Photo App - Step 55

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I don’t understand the the for attribute doesn’t work in the label element and I put the label element after the input element. What am I doing wrong?

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    <section>
      <h2>Cat Lists</h2>
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>  
      </figure>
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo">
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset>
          <legend>What's your cat's personality?</legend>
         ´´´<input id="loving" type="checkbox"> <label> for="Loving" </label>´´´
        </fieldset>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Learn HTML by Building a Cat Photo App - Step 55

Link to the challenge:

2

Ok, so this

<label> for="Loving" </label>

isn’t gonna do anything because its not in an element.
What they want you to do is add the for= attribute to the already existing input element. Then the want you nest Loving into a label element.

4

Ah, my apolgies. I read the questions wrong as well lol. The for attribute is supposed to go into the label element, i am so sorry.

5

Also if you want others to see code in this you have to type 3 backticks, look like this [ ` ], before and after your code

6

Thank you, the problem I get is that attribute doesn’t turn red and the value blue.

7

Do you mean type 3 backticks here in the replies or in the code?

8

I mean here in the chat, for example

Backtick x3
Code
Backtick x3

9

That will let us see the whole code intead of the code doing what its supposed to do.

10

This will help teach you, sorry about that im doing this from my phone.

11

Thank you so much for your answers. I understand if it’s difficult to help me from your phone. This is what I tried to code from the beginning.
<input id="loving" type="checkbox"> <label> for="Loving" </label>

12 
for="loving"

Needs to be inside the <label> 's <>

13

Ok, tried this code, and it is now empty instead of saying loving :sweat_smile: see code below, if you can see what I coded wrong:

<input id="loving" type="checkbox"> <label for="Loving"></label>

14

I did it!!! :partying_face: thank you so much.

15

Good job! However it is very discouraged to post full answers that somebody else can just copy and paste.

Also the only difference between those 2 codes is the uppercase L. Uppercase and lowercase does really matter in coding.

16

Thank you and I really appreciate your advice. I’m sorry, If you update the post you will see that I removed the code.

I also learned that uppercase and lowercase matters in code.

2 Likes
17

You’re very welcome! Welcome to the family!

1 Like
18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.