Can;t understand radio buttons

HTML-CSS
1

Tell us what’s happening:

Everytime I run this code this shows “Give your radio buttons the name attribute of indoor-outdoor” plzz help me
and explain me everything in making radio buttons.

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 type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>

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

  </form>
  
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 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

Looks like you have a typo here.

3

There are a two problems that I can see. First of all, id’s must be unique - both radio buttons have the same id. I don’t know if that is causing the fail, but the second thing is: your name attributes aren’t the same, one is “indoor-outdoor” and the other is “Indoor-outdoor”. Capitalization matters.

4

Hi everyone,

This is my first post here. I tried to find a solution to my problem, but I couldn’t figure out so I posted here.

    <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="indoor" type="radio" name="indoor-outdoor">
    <label for="indoor">Indoor</label>
    <input id="outdoor" type="radio" name="indoor-outdoor">
    <label for="outdoor">Outdoor</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    

  </form>
</main>

Things which are not completed

  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.

I don’t understand why it’s not working.
I didn’t want to open a new topic so I replied here

5

On nesting:

<label><input></label>

your end tags for the label should be after the radio input.

6

Okay You have done two things wrong

  1. First thing is you were supposed to give the same for attribute of the label element that matches the value of the id attribute of the input element like this :
<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
  1. Typo : you have given two different names(Case-Sensetive) in your name attribute of input tags
<input id="indoor-outdoor" type="radio" name="indoor-outdoor"> Indoor

<input id="indoor-outdoor" type="radio" name="Indoor-outdoor"> Outdoor
7

@l3h3l
Okay, your problem is that you are not doing nesting properly what you have done is :

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

instead of doing this :

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

See your input element should be nested inside your lablel element.
I hope it will help you :hugs: