Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Can someone help me figure out how to associate an input elements text with the element itself? I’m needing to nest the label for element within, and here’s my specific write out;
<input id=“loving” type=“checkbox”Loving/>

I’d tried closing the input code and not closing it, not having the >Loving< after the label, moving the label outside of the input id, capitalizing and not capitalizing, and I still can’t seem to figure it out! Thanks in advance!

Your code so far

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

This step requires you to add the “for” attribute to the label and use the same value as the input. The input value is “loving”. So, you need to write this like:

< label for=“loving”>Loving< /label>

This should go at the end of the < input>.

So, it’ll look like this when completed:

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

3

I plugged in “ Loving” but it’s still not working,
the L is capitalized
label element is lcosed
loving is in quotation marks
I think my spacing is correct

Still struggling though for this to pass!

4

Please post your new code for review.

5

The code in your post is written like this:

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

It looks like you haven’t closed the Input and you have added an extra /> at the end.

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

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.