Does anyone know how to nest a radio button in a label element in html?

[fuzzyrodent85]

<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><input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Outdoor
</label>
</form>
</main>

 

[themasterlurker]

Yeah

 

[Poppavalyim Andropoff]

Cats are for furries

 

[Two Yum Yums]

I'm not going to tell you the answer outright, because then you're not learning to code, you're just copy-pasting a solution. However I'll hold your hand a little bit.

Radio buttons are when you want to offer your user multiple answers, but allow them to only pick one (think a "what is your gender?", options are: "yes" "no" "tranny" situation).

To put a set of radio buttons in a page, the code consists of two features- the "label" element and the "input" element. When it says to wrap the input inside the element, it means it wants you to define the label first with <label for="indoor"> </label>, and nest <input id= "indoor" type="radio" name="indoor-outdoor"> within that code. Our finished product would look like:

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

You need to write the above code for each individual button.
The code your challenge is asking for will be making two radio buttons- so the user can select whether the cat is an indoor or an outdoor cat (but they can't select both). Let's break the above code down a little:

• label for="indoor" is stating which option button you're creating- so here we are making the indoor button. See how the input id matches this? You want the <label for=""> and <input=""> to be the same as each other when making these buttons.
• type="radio" means we are making a radio button
• name="indoor-outdoor" is the shared attribute between this and your other options, which creates a group. When you make your "Outdoor" button, the name we've stated here will carry across.
• And Indoor is the actual text the user will see on the web page.
• Note that <input> is self closing (doesn't need </input), while <label> isn't (so will need </label> at the very end.

Try following the above to make the outdoor button for your code. Hopefully this will help a bit.