Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Hello everyone, I am a beginner and I would really appreciate your feedback . How can I use the label element here with checkbox?

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>
            <label for="loving">
             <input type="checkbox" id="loving"> <label for="loving">Loving</label>
            </label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your mobile information:

iPad - iPadOS17.6.1

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

Link to the challenge:

2

you are trying to associate two labels with this input. Remove the one around.

3 Likes
3

Thank you for the feedback.I removed the one above , it’s still not working.

4

IMG_0164
IMG_01641640×490 84.3 KB

5

please copy the code you have now (after your changes)
and paste it in your reply so we can check it again

1 Like
6

Hello @HMA24 !

Did you remove the closing tag below the code, as well?
You mentioned you removed the one above it, which is the opening tag. The closing tag below it would need to be removed, too, for it to pass as explained by “im59138”

Wishing you good progress on your coding journey. :slightly_smiling_face:

2 Likes
7

Hey Buddy , See the given code in instruction given below.

<input id="loving" type="checkbox">Loving

You need to wrap your word Loving into an label.

As you did, But you need to understand why do you need another Label element as you did ?

Think and edit your code !!

2 Likes
8

Thank you for the feedback I understood it

1 Like
9

Thank you for your feedback

1 Like
10

Thank you so much for your feedback

1 Like
11

Most Welcome Buddy, Happy Coding.

1 Like
12
Is your cat an indoor or outdoor cat? Indoor Outdoor What's your cat's personality? Loving Lazy Energetic
13

Hi @a.assnani

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.