Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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<lable for="loving">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/116.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

i have tried to do it but it has really refused

3

Your text Loving which comes right after your input element is the one that should be surrounded in label tags.
Ex:

<input type="text" id="greeting"><label>Hello</label>
4

i am trying but its not working

5

Just a typo-
Use the tag <label>

1 Like
6

i have changed but just dealing with some spacing problems

1 Like
7

Is it working for you?

1 Like
8

Actually this is how I managed the solution.

Exactly! ! !

But it still doesn’t work as my mate mentioned and experienced before as well…^^
:tired_face:

1 Like
9

year it worked thanks

11

If your having issue passing this step post your code as well as a link to the step by pressing the help button which appears next to the reset button after unsuccessfully submitting your code a few times.

Screenshot 2023-08-22 171059
Screenshot 2023-08-22 171059941×490 19.6 KB

12

So anyone who can give me a hint – “at least”?!

Usually I got no problems in comprehension and transformation from theory into practice…

I want to revive my skills again. It must have been a couple of days now since I wrote the last HTML recently #ahahahaaa# :joy:

13

So how to send the code here…?! Anyone who tell me…?!

14

Create your own post by clicking the help button like I’ve shown you above.
You can then describe your issue between the ** ** marks as well.

15

click the help button and create your own post

16

Well, apparently… got it…^^ Now, as I told you below this was my intention. As I know is not a “self-closing”. This is for sure. And I recognized that Step / Chapter however “56” should be an alternative to Step “55”. But I can’t get through “HOW” and “WHY” it should be like that? Nothing more to say… no idea… I am out of it…<<

Open for any of your ideas…of course

17

Please follow the advice people are giving you and use the help button to make your own post

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 Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for 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.

3 Likes