Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

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

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

Ive looked at previous helps for step 56 but still just dont get it. Please help.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 -->

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

<!-- User Editable Region -->

          <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/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

Hello @gregnz !
You have some syntax errors in your code, some attributes are not nested correctly and some elements arent structured in the right way. Let’s walk through your code step after step.

Firstly, attributes are placed inside the opening tags of an element. To structure an attribute, you first write its name, followed by equal marks then the attribute value enclosed in quotation marks. This way, attribute name = "value". For instance, in your case, you’re asked to have an id and for attributes. The for attribute goes into the label element and the id attribute goes into the input tag. Also, remember to give the attributes the same value, that is how we connect the input tag to the label element.

Secondly, some of the elements are not properly closed.

Lastly, to nest the text Loving in a label element, let the input tag come first, then the opening label tag, then the text, and finally the closing label tag.

1 Like
3

Thank you! Just not very clear where to put the for label…but I see now…very valuable input.

5

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