Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
How to associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.

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" ><lable>Loving</lable>

<!-- 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/121.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Add a label opening tag, within the label opening tag add for attribute, give for attribute same value as you added in your input id. Then give a space and add text Loving and label closing tag.
@Fauzan1

4

Your label tags are not correct. Also need a space before text Loving, and “for” attribute with the value in opening label tag.
@Fauzan1

1 Like
5

Loving
is this what you saying

6

I briefly mentioned all in above post. Read carefully.
@Fauzan1

1 Like
7

I’m still suffering brother . I’ve been on that part for the past 2hrs

8

Post your updated code here.
Copy your code and paste it here with three back ticks ``` in a separate line before and after your code. That way anyone can see your code here.
@Fauzan1

9

Hello!

Once the label tags are spelled correctly, add the for attribute to the opening label tag with the value set to the loving value to match the id.

It looks good otherwise.
Happy coding!

1 Like
10

thank you all
i have been able to conquer it

2 Likes
11

can u help me in myyy bugg

12

Good to hear that you have been able to move on further with your coding journey.

Happy coding!

13

Hello @majd_alam !

Could you please create your own post using the Help that appears when the step has been attempted several times?

This will allow you to post all current code, along with the question and error message.

Happy coding!

14

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