I am stuck on how to use radio elements

HTML-CSS
1

Tell us what’s happening:

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>
 <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>
</form>
</main>

Your browser information:

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hey there!

Take a little look at the code that the lesson mentions:

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

The label tags surround the input line(or the radio button). Or differently put, the radio button is nested within label tags.

Now look at one of your radio buttons:

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

See the difference? Your radio button is not nested within label tags. Nor is the for attribute and its value in the correct position.

Change your code based on this and then Run the Tests again.

Hope it helped, at least a bit.
Happy coding! :slight_smile:

3

Exactly where the problem was. Codes must be nested.

1 Like
4

I am having the same issue. The way @atharva7518 did it is exactly how the instructor in the video does it. This is why it’s so confusing!

5

Be careful. The videos don’t stay perfectly up to date with the challenges. You need to read the challenge and the test results instead of only copying what the video says.

1 Like
6

I feel like I’ve tried everything. Currently mine says I need closing tags on my label elements. Did I not do that?

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

 </label>

<label for="oudoor">

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

  </label>
7

Sorry, this is what I actually have…nevermind, it’s not showing my entire code…this is so frustrating.

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

 </label>

<label for="oudoor">

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

  </label>
8

I don’t see an opening indoor label?

9

Hi @tabithaj777,

If you add the label for indoor and fix the below spelling, does it work then?

image

10

You missed the spelling of outdoor in the for tag. Correct that and it will probably put a smile to your face.