Set of Radio Buttons

HTML-CSS
1

Tell us what’s happening:

Hello, I don’t know what am I doing wrong, it says that I need to do 2 more things:

  1. Give your radio buttons the name attribute of indoor-outdoor .

  2. Each of your two radio button elements should be nested in its own label element.

But I don’t get it, both have the same attribute and each one it’s nest in its own label.

Thanks!

Your code so far


<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <input id="Outdoor" type="radio" name="indoor-outdoor">
    <label for="Outdoor">Outdoor</label>
    <input id="Indoor" type="radio" name="indoor-outdoor">           <label for="Indoor">Indoor</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons/

2

what you have to do is that you just have to create two radio buttons nested inside a single form tag.
EG:

indoor outdoor Thats it and you are done!!!
1 Like
3

I really don’t understand, I watched the video 5 times, I did exactly right there but still it’s not working, I am so stupid

1 Like
4

Both of the warnings are caused by the same error - you are not nesting the radio buttons in the label tags.

While the video example is technically correct it does not fulfill all the requirements of this challenge.

There are two examples at the left of the page. Both have the radio button nested in between the opening and closing label tags. You need to make yours just like those examples.

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

Yours code is not the same - input is not nested between the label tags.

<input id="Outdoor" type="radio" name="indoor-outdoor">
<label for="Outdoor">Outdoor</label>

The video fails to mention that while generally it is not mandatory to nest radio buttons in label tags the instructions for this challenge require it so you will need to do that to pass.

The the assertion test is seeking radio buttons nested as above to also check that they have the name attribute ‘indoor-outdoor’. Since the test can’t find them, it cannot confirm that they are correct. Fix the nesting and both warnings will disappear and then you can pass