Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have tried adding the for attribute in the suggestions given but it still says it is wrong. What am I doing wrong here?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

The instruction told you to nest a text not a label element with text

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

The order should looked like this
<input class><label class>text</label>
3

I tried that and it still told me the code does not pass

4

Hello!

You have a <label> before the input element. It shouldn’t be there. You need to label only the Loving text, just like you did.

You are also missing the for=“loving” attribute in that label. The for attribute must be used in the label element, not in the input element.

And you can’t have space between the attribute and the value, this is wrong:

The attribute and value must be together, without spaces, like this:

for="loving"

To clean your mistakes, use the Reset Step option, and simply add the label+for atributes to the Loving text only (only the text, without the space).

Hope it helps!

7

Hallo, I tried that and it still said the code does not pass.

8

Reset Step to clear any mistakes.

You have the text Loving, add the label element to it:

<label>Your_Text_is_here</label>

Now, simply link your label to the input by using the for atribute and the input’s id:

<label for="id_of_input">Your_Text_is_here</label>

If I have this:

<input id="namee" type="radio"> Namely

Now I want to do the same, apply a label to Namely and link it to the input, I just need to surround it with label, using the for on that same label, nothing else:

<input id="namee" type="radio"> <label for="namee">Namely</label>