Freecodecamp: two radio button elements should be nested in its own label element. but how? thanks

Created on 16 Sep 2015  路  7Comments  路  Source: freeCodeCamp/freeCodeCamp

Challenge Waypoint: Create a Set of Radio Buttons has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></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>
</form>
<label>
  <input type="radio" name="indoor-outdoor" >indoor
  <input type="radio" name="indoor-outdoor" >outdoor
</label>

Most helpful comment

@vvkgdm thanks for posting this issue!
This is the description of that test:

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

This means that you should create two labels for your radio buttons. This is how you should do that.

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

If you have such questions/problems, please, post a message in our Gitter chat room first, thanks.


Please review the Guidelines for Contributing, thank you!.


All 7 comments

@vvkgdm thanks for posting this issue!
This is the description of that test:

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

This means that you should create two labels for your radio buttons. This is how you should do that.

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

If you have such questions/problems, please, post a message in our Gitter chat room first, thanks.


Please review the Guidelines for Contributing, thank you!.


Thanks

I was stuck here for a long time! Thank you!

thank you...

Could anyone tell me why this is so ? Because I don't see the difference.

Cheers! I was stumped on this one.

Put both the inputs in separate label tag!
<label> <input type="radio" name="indoor-outdoor">indoor </label><br> </label>
<label> <input type="radio" name="indoor-outdoor">outdoor </label><br> </label>

Was this page helpful?
0 / 5 - 0 ratings