Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Stuck on this step. confused on for=“loving” attribute. I tried for=“loving” and
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"> Loving <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/113.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

You dont have anything inside the label. Your text “Loving” is on the outside of the label, but you need to have it inside your label

3

hi,

I changed it to , still no luck

4

Can you share your new code. You can use the </> button and paste all your code between the lines it gives you.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

5 
 <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"></label>
6

Where is the “Loving” text. You changed the for attribute, and got rid of the text. Which was not the right direction. So here you have the line

<label for="Loving"></label>

You have nothing between your label tags. This means your label is completely empty. You need the text “Loving” to be inside your label (or between the tags). This has nothing to do with your for attribute at the moment.

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

still confused

9

Is there something about this I can make more clear, or did you have questions about this? You are still not putting the text “Loving” between your label tags like I mentioned here.

Looking at this might help clear your confusion on how to use labels

10

you associated the input with your element correctly but there is something missing within your label element as Cody-Biggs already said.

<label></label>
11

the text Loving is between the tags
Loving <label for:“loving”> </label>
what am i missing here

1 Like
12 
<label for:"loving"> </label>

Can you tell me where the text is in the label here? Forget your for attribute for right now. I think thats confusing you.

Did you look at the link I sent?

14

you have to understand that you have to seperate “attributes” from “texts”. because the “attribute” (for=loving) is not the text. the text of the label element is between:

<label ="loving">

and

</label>
15

ok? so where would the “text” go.? is it loving??? am I suppose to type “text”. nothing is helping

16

loving? not sure. the link isnt much help

17

This is an example from the link

<label for="cheese">Do you like cheese?</label>

The text here is “do you like cheese?” Do you notice how the text is between the label tags? Every code you sent has has never had anything between your label tags. This is where the text goes

18 
  <input id="loving" type="checkbox">Loving<label for="loving">Loving</label>
is this not the same from the example?
hint:The text Loving should be wrapped in a label element.
19

In this you need to get rid of the “Loving” that comes after the checkbox. You only want the text “Loving” inside the label

20

This is the working code
```
Loving

22

Mod edit: removed solution

23

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.