Having trouble with labels. help would be appreciated

HTML-CSS
1

Tell us what’s happening:
“Each of your two radio button elements should be nested in its own label element.”
when I run the test this is the only requirement that I am not passing. Any suggestions?

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/70.0.3538.102 Safari/537.36 Edge/18.18363.

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

Hi TWOthumbsUP92,

The element must be nested inside the tags in order to have the label correctly applied to them.

(The radio buttons must be moved inside the corresponding label, instead of appearing one after another in your HTML)

Hope this helps,
Cheers

3

Thank you, passed.

cheers,

1 Like