Radio button elements should be nested in its own label element

HTML-CSS
1

Hiya, I’m doing the FreeCodeCamp for HTML 5 and have hit a brick wall with code for a task.

Task
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.

My code

Indoor Outdoor Submit

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

Can anyone spot an obvious error?
Many thanks
EvaTell 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 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 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hello and Welcome to FCC Forums @evawru,

  • The challenge asks you to create an input with a type of “radio” that is nested inside its own label. You successfully created the inputs, but you didn’t nest them. In Programming, nesting means putting a function or element inside another element or function. In HTML specifically, it’s putting an element inside another element. Ex:
<div>
  <p>This paragraph is nested inside a div tag </p>
</div>
3

Hey, thanks for your quick and helpful response. So where would I need to add that within my codes? Many thanks

4

So the challenge asks you to nest your input inside the label tag. That means putting your input inside a label tag.

5

That’s great, but I’ve got no idea how to add that to my code… can you help wiht that? Thanks

6

We can’t help you by giving you the code answer. We can help you try to figure it out, but the rest is on you. That’s how you learn. I already gave you a couple example. Here’s another one:

<div>
  <label> This label is nested inside a div </label>
</div>
1 Like
7

Did you see the example in the written challenge description?

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

It seems like you may be watching the videos instead of reading the challenge descriptions. The videos are great, but they don’t always tell you how to exactly pass the challenge. You always need to read the challenge description carefully.

8

lol I thought that’s what you were doing. OK cool. I will go back and re-study it. I don’t recall seeing the div bit on the previous sections of the learning though. I may have missed it… Thank-you for your help :wink:

9

Hey Jeremy, I was doing both, but ended up going over and over the video as I couldn’t work it out - an hour passed by too :scream:

10

this is your code, they are not nested

this is the example code, this is how you should do it

2 Likes
11

Hey ieahleen - thanks so much for your help. What may appear obvious to some, may not always be the case for others. I will revisit my code, correct it and re-study where I went went wrong :blush:

12

Here is the way to solve this problem
label>
label for=“indoor”>
input…>…/label>
/label>

Now create label for “outdoor”
:slight_smile: