Nested in its own element?

Tell us what’s happening:

Each of your two radio button elements should be nested in its own label element? What am I missing? What does this mean? Why can’t I submit my code? I followed the video exactly.

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

You’re missing this step. As it stands, your input and label elements are independent of each other -

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

whereas the challenge requires you to “nest” each input element within its corresponding label element.

Look at the given example which shows how you nest an element within another -

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

I thought I tried that already, but it didn’t work so I did exactly what the video told me to…
Can you clarify a little better please?

Hey @ifilllatonya,
label elements describe an element.
This challenge is asking you to “nest” these radio buttons inside a label element .
So you need to be worried about putting your code (for the radio buttons) inside this element. :slightly_smiling_face:

Generally, when you “nest” a second element within a first element, you put the second element within the opening and closing tags of the first element. For example, to nest a p element within a div element, you’d write it this way -

<div id="outer-element">
  <p id="inner-element">This is a paragraph</p>
</div>

So here, you nest the p element within a div element. Notice how the p element lies within the opening and closing div tags.

Also note that the p element has some text of its own, which lies within the opening and closing p tags.

Similarly, look at the given example -

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

See how the input element is “nested” within the label element, ie, between the opening and closing label tags?

If on the other hand, you have -

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

Then there is no nesting, now you have two independent HTML elements.

Can you give it a shot now?

Hey @ifilllatonya, look really close to this example.
This is a great example.
Good job explaining your point @Manish-Giri.

Oh okay. Thank you :smile:

Awesome! Thank you so much for your assistance. I will try. :smile: