How to nest radio

Tell us what’s happening:

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 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15.

Challenge: Create a Set of Radio Buttons

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

Welcome to the forum @zoooeeish!

The challenge is saying to nest an input for radio button within label tag.
The way you should do it is given within challenge,as an example.

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

Label’s for attribute should be the same as input’s id in order to connect them.

Also,pay attention when giving name to your inputs,name should be the same case as given from requirements.

<input id="outdoor" type="radio" name="Indoor-Outdoor">
indoor and outdoor should start with lowercase,not uppercase…

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