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:
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.
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
flimes
June 30, 2020, 3:51pm
5
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
flimes
June 30, 2020, 4:05pm
7
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.
Thank you for your help
We’ve all been there. I’m glad I could help.