Label tags for radio buttons

[Lizzie]

Hello! This is about the HTML lesson in which we learn about radio buttons. I’d like to know why we need to put each button nested inside it’s own label tag. I did it with only one label tag (nesting both buttons) and it worked the same as using one label tag for each button/option.

This is the code from the lesson. The radio button part is towards the end.
Thank you!

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

</form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Challenge: Create a Set of Radio Buttons

Link to the challenge:

freeCodeCamp.org

[medic1111]

Hey There =)

There’s a concept called “Semantics” which is about how properly you name everything in HTML. It helps with rendering and accessibility.
Make sure to do a quick humble research on Semantic HTML and you can learn a lot about it.
Happy Coding

[Lizzie]

Semantic HTML, I didn’t think of this! I actually tried googling just my question straight up, and didn’t find satisfactory results.
Thank you for explaining the general idea and guiding me towards a more effective search.

[Roma]

Go back to the lesson and just wrap both radio buttons in label element.
Go to the preview and then click on each of the radio button labels.

Now do as the lesson describes and wrap each radio button in its own label element.
Go to the preview and then click on each of the radio button labels. Notice the effect?

[Lizzie]

Hi, thank you for your comment!
So, this is the code that I had done first, and didn’t pass the tests:

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

and this is the code that did pass the tests:

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

I interacted with both on the preview and saw/noticed no difference. They both had the same behavior to me

[Roma]

Yes, I understand what you meant.

And my advice still stands.
Using the first code, that is one label element with both radio buttons nested, and click on each radio buttons label.
The labels are “indoor” and “outdoor” respectively. Not the radio buttons, the labels.

Now nest each radio button in its own label element and click on each individual label. Again, the labels are “indoor” and “outdoor”.

[Lizzie]

Ah, now I understand what you were talking about. That’s really cool! It really makes such a difference. Even if I click the latter label, it’ll mark the first button.

Now I understand why put each button nested in its own label. Makes much more sense now. Thank you so much!

[Roma]

Glad to help.

It’s good that you’re not just rushing through the lessons and are trying different things. It’s the way to learn.
Keep it up. And don’t be afraid to ask questions on what you don’t understand.