Radio button labeled

HTML-CSS
#1

I’m almost done with this last test, the problem is that it says that my radio buttons aren’t given individual label elements when they are, what’s wrong?

Submit Indoor outdoor 

<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 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>
 <input id="outdoor"type="radio"name="indoor-outdoor">
<label for="outdoor">outdoor</label>  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

#2

Doesn’t it say they’re not nested? An example of nesting;

<outerElement>
  <nestedElement> </nestedElement>
</outerElement>
#3

Yes, except I’m positive that I nested them. Could you take another look?

#4

I’m looking at what you posted and they’re not nested correctly. Look at the sample code in the lesson.
If you’ve updated your code then please post the updated code so I can look again.

Edit: you’ve only nested the label. You’re asked to nest the whole radio button.

#5

Ok, I’ve updated the code, what do you think?

Submit <input Indoor Outdoor
#6

wait, that’s not the whole code!!

<form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  <input <label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label> 
<label> 
  <input type="radio" name="indoor-outdoor">Outdoor 
</label> </form>
</main>
#7

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

#8

ok, good to know, thank you

#9

So the first one is incorrect. See how you have <label> inside of the input element?
The second one is correct. If you make the first one look like the second you’ll pass the tests.

#10

Btw @kalebross30, you’re doing good. One thing you should take away from all this. When you get the code correct, click on the radio button and you’ll see it gets selected. Then click on the label of the other radio button and you’ll see it gets selected.
When everything is properly nested users can click on the radio button (or checkbox) or the corresponding label to make their selection.
That is the purpose of this lesson. When you do the survey form project you’ll remember this.

#11

thank you :wink: very much

#12

You’re very welcome. Is everything passing?

#13

Not yet unfortunately

#14

I hate to admit it, but I’ve even copied and pasted the same act code from the video lesson and it still doesn’t work. This very strange:

''' Indoor ''' ''' Outdoor '''
#15

This is what you have

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

the very first line <input needs to be removed.

#16

If you want to post code just click the </> button on the toolbar above the text box you type into. Then paste the code where it tells you to.

FYI, I believe adding <br> tags will make the test fail.

#17

The video isn’t nested properly.
See my previous post to get yours to work properly.

#18

@lasjorg, the <br> tags are okay here. They use them in the code sample (unfortunately)

#19

Thank you, it worked. I’m book marking this conversation for further reference

1 Like
#20

@Roma What code sample?

It looks like if the <br> tag is added after the label it still works, but not if you add it after the input.

@kalebross30 Just be aware that adding code you are not asked to can break the tests.

Side note: We should probably get the video updated. I can make an issue, but the last video I tried to get an update for never happened. I can still try.

Edit: I opened an issue, lets see what happens.

1 Like