Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

Loving .
Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.

Tried codes below but it didn’t work. Kindly help
Loving

Loving

Loving

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 for="Loving"><input id="loving" type="checkbox"> 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/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You need to put the label around the word Loving and leave the input outside it. (Move the label opening tag to the right of the input. Make sure to leave one space character to the left of the label (between input and label)

3

Hi there,

You shoud take the input element outside of the label element and put it before the label element.
What should be left inside the label element is only the text: " Loving".

And the value of the for attribute should be lowercase text.

Happy coding!

4

Hello,
I tried 3 options. Please which one are referring to.
Thank you.

5

Look like you posted 3 options on the first post.

To post your code to the forum, you must put your code between 2 line of ``` (3 back ticks) (the back tick key is usually under the Esc key on your keyboard), like this:

```
# your code here
```

or you can use the Preformatted Text button:

6

Well noted.
First time here.
Thank you.

1 Like
7

None of the three options are correct. Please try to read my post slowly so you can understand what I am saying.

1 Like
8

Finally it worked.
Thanks.

1 Like
9

It is working now.
Thanks.

2 Likes