I cant pass this stage.....Each of your two radio button elements should be nested in its own label element2

HTML-CSS
1

Tell us what’s happening:
cant slove
the fail task:Each of your two radio button elements should be nested in its own label element

the code i have:

Submit
Indoor
Outdoor

what im i going 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="https://freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  <input id="indoor" type="radio" name="indoor-outdoor"><label for="indoor">Indoor</label></input>
  <input id="outdoor" type="radio" name="indoor-outdoor"><label for="outdoor">Outdoor</label></input>
  
</form>
</main>

Your browser information:

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hello. Your input should be NESTED in label. Nested basically means “put inside”. So it should look like this:

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

You can imagine nesting as creating a circle and then creating smaller and smaller circles inside of it. Each smaller circle is then nested in all the bigger ones (they are inside all of the bigger circles). Hope this helps! :slight_smile:

1 Like
3

thank you very much , it worked and i understand what to do thanks to you