Difference relationship for label and button

Tell us what’s happening:

So as I am walking through the content, I found it’s interesting for the label tag, so I googled it and found this page: https://www.w3schools.com/tags/tag_label.asp

And then I noticed that on the w3c the label is used like:

  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male">

And so that the radio button is displayed after the “text”. When one of the radio buttons is selected, and the result is submitted, the web page still managed to get the correct label although it is not a child element.

My question is other than putting the radio button behind the text, are there any other differences/benefits/drawbacks if the radio button is a sibling of a label instead of a child element. How do these two ways compare?

Well, I am not so sure if I asked the right/meaningful question. Please let me know your thoughts.

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2 Likes

Hi @Mr.Z. I googled your question and found out this in StackOverflow:

The difference is simple, but I prefer using the input fields outside the label element. If I have a radio or checkbox element, I put the input element inside the label.

The reason you can focus on the input even if it is not a child element of the label is because of the for attribute inside the label. The for attribute’s value should be equal to the id of the input.

Hope You Understand!

If you nest the input inside the label element you get the for behaviour without needing to explicitly set the for attribute.

If you don’t nest it, the label will be connected to the input with an ID matching whatever for is. And it makes absolutely no difference where on the page the input and label are, they will always be connected. Don’t have to be siblings. This way is much more flexible and normally easier to lay out and style.

1 Like

Thanks for your reply!

1 Like

Hi DanCouper,

Thanks for your respond, and it helps a lot to understand the difference.