Learn HTML by Building a Cat Photo App - Step 52

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
It says I should nest the indoor and outdoor in a fieldset element. I don’t know what I’m doing wrong can someone help
Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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></fieldset>
          <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>
</field>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your mobile information:

23106RN0DA - Android 13 - Android SDK 33

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

Link to the challenge:

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

you added a fieldset but it’s empty, you need to put in there the elements that you are asked to add

4

Tell us what’s happening:
Describe your issue in detail here.
I have been trying for hours to nest the indoor and outdoor radio buttons within a fieldset element. Someone should help me please I’m stuck here
Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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 type="radio" value="indoor-outdoor"></fieldset>
          <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>
     </field>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your mobile information:

23106RN0DA - Android 13 - Android SDK 33

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

Link to the challenge:

5

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!

7

fieldset isn’t an input element. You can’t add type attribute and value to it. Also you have a typo in the closing fieldset element.
The instructions is asking: Nest the Indoor and Outdoor radio buttons within a fieldset element, and don’t forget to indent the radio buttons.

Reset the challenge step and only add a fiedset opening and closing tags around that two radio buttons are present in the challenge editor. Don’t add any attribute and values to the fieldset element.

8

I have merged your two topics, please do not open multiple topics for the same step

your fieldset is still empty

9

I changed it to .

radio indoor outdoor I'm still not getting this 😓 I'm stuck I don't know what to do anymore I need more clear help please
10

I’ve added. Radio indoor and outdoor in-between the fieldset element but it still not working out

11

@Zionmusa You shouldn’t add the label and radio input elements, nor any attribute and value to it.
Reset the challenge step to restore original code back.
Then only add a fieldset opening and closing tags around both radio inputs along it’s labels element. Remember don’t add any attributes and values to the filedset element.

12

What does it mean to indent the radio button I’ve been doing this for hours still not getting it. I’ve add the indoor and outdoor buttons in the fieldset element but I’m still not getting it

13

What is radio button and associated label? I don’t get that please help

14

Hi @Zionmusa

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image1163×338 25.9 KB

As @ILM mentioned, you have a problem with the fieldset element.

At the top of the above code block, remove the closing fieldset tag.

Happy coding

15

I got that. Thank you

1 Like
16 
<label for="radio-button"><input id="radio-button" type="radio"> Label</label>

@Zionmusa That’s an example radio button and it’s associated labal element.

17

Make sure you are using the appropriate CSS for layouts, such as margin-left or padding-laft for indentation. Additionally, make sure that your radio button is correctly nested within the fields fieldset and legend elements, and check for any conflicting styles that can affect their appearance.