Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Hey!

I’m struggling with my code,step 56. So this is my code, but the hint says that
the text loving shouldn’t be located directly to the right of the checkbox. It should be wrapped in the label element.
I tried so many times and still don’t get it.
Is it correct also the I put label element before the input or I should do i between the loving? I already tried also like that but didn’t success… Can you give me some hint,please?

<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" > 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; rv:109.0) Gecko/20100101 Firefox/109.0

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

Link to the challenge:

2

The order of elements is:

  1. input
  2. the opening label tag
  3. Text
  4. the closing label tag.

The href attribute goes into the opening <label> tag.

3

I also tried like this but it still wrong…

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

4

This is my mistake.

The for="loving" goes into the opening <label> tag:

<label attribute="value">

‘for’ is the attribute,
“loving” is the value

Also, make a blank space between the ‘input’ element and the opening label tag.

1 Like
5

Oh I get it. Thank you, I also needed to reset my code and rewrite it again and then worked with your example.

1 Like
6

Can you show me an example of what you mean by adding a blank space between the ‘input’ element and the opening label tag. I am lost.