Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

It says your label element should have the text Loving. I have included the for attribute inside the label element, and i have also put the label element after the input element. I would love some help with this thanks.

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 -->

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

Please reset the step as if you look in the preview pane, the word Loving has now disappeared because you have moved it into the label tag’s for attribute.
Instead, you are supposed to nest the word Loving in a label element by placing the opening tag on its left and the closing tag on its right.
The for attribute added to any label should have the exact same value as the id attribute of its corresponding input element. In this case the corresponding input element’s id is loving.

3

Loving That’s what I have changed it to; now it says my label element should have a for attribute with the value loving. What does it mean when it says “with the value loving”? then it says expected Loving, but found Loving.

4

When you have Loving by itself and is visible in the preview pane, the browser doesn’t know that this word Loving is the label for the input element. So you need to explicitly tell the browser this by nesting the word Loving between two label tags (an opening and closing tag).

This action is what the step refers to when it says: nest the word Loving in a label element.

After that, we have to connect the label element with the input element. The input element has an id equal to loving.
So, we assign a for attribute in the label’s opening tag and give it the value “loving” to match.

5

I did it; it turns out I had it right several times, but the word loving in the for attribute was a capital. haha