Learn HTML by Building a Cat Photo App - Step 56

Can someone please let me know why this code doesn’t pass. I am very stuck on it and have tried multiple fixes.

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

Welcome to the forum @josephineeve

The input element needs a closing angle bracket.

Happy coding

Thanks, am still getting this message. Don’t understand how it is not wrapped within the label element

You need to add a closing angle bracket to the opening label tag.
Since the tag is not closed, the browser will count any text or code as part of the element. So, the word Loving does not appear nested in the element.

Still with that, not working

Post your full code 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>
            <input id="loving" type="checkbox"> <label> for="loving" Loving </label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>
1 Like

The closing angle bracket needs to go after the for attribute.

Since the input element is a self-closing element, the end of the description remains empty. So you can think of the label element as a helper to the input element. But in order to connect these two, you need to synchronize the “id” of the input element with the “for” of the label element. these synax rules can be a bit confusing. stay calm and focus on the reason for what you are trying to do.

1 Like