Basic HTML and HTML5 - Create a Set of Radio Buttons

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 >how do i do that

  **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">
<label>
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor">
<label for="outdoor">Outdoor</label>
</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/104.0.0.0 Safari/537.36

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

Link to the challenge:

The pattern you are using to create the labels isn’t the one requested.
The pattern you need to pass this exercise is this one:

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

Notice the differences:
=> In the correct sample code, there is only one label element for one radio button.
So in the correct solution code, there should be two label elements respectively for the two radio buttons.
=> In the correct sample code, the text of the button “Indoor” is placed directly after the input element. While in your solution, you placed the text after the label element.

So to correct this, just copy the sample code to the working area twice.
Then make minor correction to the sample code to make one radio button say indoor and the other say outdoor (with correct ids attributes and for attributes).

1 Like