Create a Set of Radio Buttons, Again!

HTML-CSS
1

Tell us what’s happening:
Getting this message: Give your radio buttons the name attribute of indoor-outdoor.
Each of your two radio button elements should be nested in its own label element. <-------- This even though my code looks identical to the solution videos code. Tried the help topics. So far hasn’t helped.

Instructions on the freecodecamp challenge page look like this:
Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.

Here’s an example of a radio button:

<label>
<input type=“radio” name=“indoor-outdoor”>Indoor
</label>

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:

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

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.

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

Link to the challenge:

2

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

nested in its own label element

1 Like
3

Thank you for your reply! I tried what you suggested, but this is the error message I’m now receiving:

Your page should have two radio button elements.
Give your radio buttons the name attribute of indoor-outdoor .
Each of your two radio button elements should be nested in its own label element.

Ugh!

1 Like
4

try this:Screenshot_3

1 Like
5

Hey, any solution for this problem? It seems impossible to pass this challenge… it may be an error… :sleepy::pensive:

6

Just tested, it works just fine. Post your code so we can see it. Remember to format the code.

7

This was frustrating me as well but i played around with it.
so, everything goes inside

(form)
(label for) “indoor” (close label)
(label) input id… type… name…>Indoor(close label)

repeat above two lines for Outdoor
(close form)

Good luck… Im a beginner too!!

1 Like