Basic HTML and HTML5 - Create a Set of Radio Buttons

HTML-CSS
1

Tell us what’s happening:

I’m not having any issues actually, I’m just curious… What is the purpose of nesting the radio buttons in their own labels? It still seems to work just the same without them being nested.

##What I’m referring to that still works

<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>
  <p>Vote which cat you would like!</p>
    <input id="indoor" type="radio" name="indoor-outdoor">
    <label for="indoor">Indoor</label>
    <br>
    <input id="outdoor" type="radio" name="indoor-outdoor">
    <label for="outdoor">Outdoor</label>
      </form>


</main>

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">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  <p>Vote which cat you would like!</p>
 <label>
    <input id="indoor" type="radio" name="indoor-outdoor">
    </label>
    <label for="indoor">Indoor</label>
    <br>
 <label>
    <input id="outdoor" type="radio" name="indoor-outdoor">
    </label>
    <label for="outdoor">Outdoor</label>
      </form>


</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Basic HTML and HTML5 - Create a Set of Radio Buttons

2

I just realized I could’ve simplified this code by getting rid of the separate “label for…” and just put the label in the opening tag.

3

A radio button always needs a name. The easiest way to do that is using a label element and associating it to the radio input with the for attribute. Whether you nest the input in the label doesn’t matter.

Some people don’t like adding extra divs if they can help it. I think sometimes for styling you might be able to avoid adding an extra div if you wrap the input in the label. Personally, I don’t worry about adding some extra divs for styling purposes (that’s what they are there for), so I almost never nest inputs in labels. But really, it probably just comes down to personal preference.