Help, i did exactly what said in video

Tell us what’s happening:
i did what said in video, i even copied what he did, and i can’t run the test because it says Each of your two radio button elements should be nested in its own label element. What can i do? help fast please

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/83.0.4103.116 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

Hi and welcome to the forums!

It looks like you missed this part of the challenge description.

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:

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

Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor . Both should share the name attribute of indoor-outdoor to create a radio group.

When the challenge description and the video get out of sync, the written challenge description is always correct!

3 Likes

sorry man but i dont get it, can u send me an example please?

This is the example. You need to put your radio button in between the opening and closing tags for the label.

<parent>
  <child>
</parent>

You have instead:

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

which is not nested.

1 Like

I’m having a similar problem with this task.

my code is

<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">
    <lable for="indoor">
      <input id="indoor" type="radio" name="indoor-outdoor">indoor
      </lable>
    <lable for="outdoor">
      <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
      </lable>
  <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

as far as I can see its nested but I keep getting error saying they need to be nested inside their own lables.

I’ve tried both firefox and chrome on linux.

In your case, lable and label aren’t the same word : )

1 Like

Can’t believe I did that - I had it typed up write then changed thinking it looked wrong.

guess that what i get for trying to code without enough sleep. :joy:

Thank you for your help

We’ve all been there. I’m glad I could help.