Radio buttons nesting *help*

HTML-CSS
1

The only action I am stuck with here so far is the “nesting” a label in each of the radio bottons labeled “indoor-outdoor”. I see that they are given each label button, I’m wondering if you could help me see what im lacking.

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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://www.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>

<label for ="outdoor">
  <input id= "outdoor" type="radio" name= "indoor-outdoor">Outdoor
  </label>
  </form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Challenge: Create a Set of Radio Buttons

Link to the challenge:

3

Thanks @SonuShivcharan . I have tried to change the ‘name’ but it wants me to use the same “indoor-outdoor” value for the “name”

// running tests Each of your two radio button elements should be nested in its own

label

element. // tests completed

These were the notes at the bottom.

4

Try this


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
<!--your code

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

<label for ="outdoor">
  <input id= "outdoor" type="radio" name= "indoor-outdoor">Outdoor
  </label>
  </form>
</main>
5

@Taishi I tried running your code and I received the following error:

Each of your two radio button elements should be nested in its own label element.

But one of your radio buttons is not nested.

6

Do not try to write answers for users. Thanks

7

This button is above the label, not inside it.

This one is nested inside the label.

8

“Nested” means inside.

In your code, quoted below, one of the radio buttons is not nested inside a <label>this is nested text</label> tag.

The word test is nested.
<label>test</label>

9

Hi Jeremy,
Whats wrong with my answer?
Please tell me.

10

You wrote the out the solution. Please do not do this.

11

Thanks Jeremy the example you showed me allowed me to pass through the section, that sonu thanks jeremy!

This makes me want to learn more!

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.