Radio buttons nesting

HTML-CSS
#1

Tell us what’s happening:
nesting issue when running test …what am I doing wrong

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="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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15.

Challenge: Create a Set of Radio Buttons

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

#2

Can you put the error message?

#3

Each of your two radio button elements should be nested in its own

label

element. // tests completed

#4

You need to put the INPUT tag inside the LABEL tag (I mean, nested). Like this:

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>
#5

It looks like your radio buttons are not nested inside the label. The label is below the radio button in your code.

#6

I guess I am confused… I am watching the video and is telling me that if the the input id and the label are set up correctly to the same indoor or outdoor nesting is not necessary

#7

it is true that it works fine, but if the video is telling that’s the way to solve the challenge then it is wrong
the challenge clearly asks for nested elements

#8

can you take a look at the video. because I am very new at this just a few days and I can’t get pass this challenge.and I want to understand the concept.

#9

What is the link to the video? The instructions and test are explicitly telling you to put the radio buttons nested inside the label.

#10

look at the example code in challenge description to see how nested objects are

or with fiction names:

<parentElement>
   <childElement>I am a child element nested in the parent element</childElement>
<parentElement>
#11

bob the video is on the help section of the challenge I can’t forward it

#12

The video is explaining how the label and radio buttons work.

The challenge and the tests and the two of us are telling you that you need to nest the radio button inside the label to pass the tests.

#13

<input id="indoor"type=“radio” name=“indoor-outdoor”>
indoor

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

for the life of me I can’t get it

#14

Your solution does not have the radio button nested inside of the label.

#16

I am stump…is the parent element
in can’t wrap my head around this nesting on its own label

#17

Both solutions are right, BUT FreeCodeCamp’s challenge wants you to use the nested option. Otherwise your answer is not going to be approved by the platform.

#18

thanks Jenro. I am very new to all this just a few days and I am stuck with this challenge I can’t understand the nesting concept for some reason.i am sure is simple but not for me at this moment.
I would keep at it hope something clicks

#19

You need to put the radio button element in between the opening and closing tags of the label. This is called nesting. This is in the example code on the challenge and the posts above.

#20

do you understand this?

#21

You are going to see this nesting concept several times while learning HTML. Don’t worry too much about it. After some practice you are going to understand this.