Create a Set of Radio Buttons, why am I wrong

HTML-CSS
1

**Tell us what’s happening:**Why am I wrong?

Indoor

Outdoor

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>

Your browser information:

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

You need to nest the radio buttons inside of labels, as shown in the written challenge description.

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

I tried all that I could. The option shows alright but I cannot proceed. Could you help me to get nesting done right?
Thanks JeremyLT.

4

Is there a part of the example I can help explain better?

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

You don’t want to exactly duplicate the video in this case, as the video is not fully up to date with the written challenge description. When the video and the challenge description disagree, the written description is always correct.

1 Like
5

Thanks JeremyLT. I tried both ways but am not getting the nest right.

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

  <label for="outdoor">Outdoor</label>

This way too

<label>

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

<label for="indoor">

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

<label>

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

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

  <label for="outdoor">Outdoor</label>
6

You need to click the </> button to wrap your code in backticks ``` so that we can see it.

7

Thanks JeremyLT! I am grateful

8

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

(@JeremyLT done!)

9

if this is your code you have too many elements.

you need only two radio buttons

10