Basic HTML and HTML5 - Create a Set of Radio Buttons

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Each of your two radio button elements should be nested in its own label element.

<label for=“outdoor”>Outdoor

i think it’s nested ? what am i missing ?

  **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>
<br> 

<label for="indoor">
  <br> <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>

  **Your browser information:**

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

Challenge: Basic HTML and HTML5 - Create a Set of Radio Buttons

Link to the challenge:

2

Hello, I highly recommend you use the new responsive web design, it’s much better: https://www.freecodecamp.org/learn/2022/responsive-web-design

If you want to stay in the old one, you need to remove this <br> tag. It shouldn’t be there.

2 Likes
3

so what about some help regarding my “nested” “label” element ?

4

How about doing what I said and trying again? :wink:

2 Likes
5

… THANK YOU !!!
:blush:
:blush:

1 Like
6 
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

Hi
why we have to indicate at the name both indoor-outdoor if we make the radio on one option ?>
thanks in advance
7

You use radio inputs when you want the user to select ONLY ONE OPTION!

You give all radio inputs the same name because that’s how you prevent the user from selecting more than 1 radio input.

When all radio inputs have the same name attribute, they are called a radio group, and you can only select 1 option from a radio group.

1 Like
8

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