Using "label" while creating radio buttons in HTML

Challenge number 33: https://www.freecodecamp.org/challenges/create-a-set-of-radio-buttons

This challenge asked me to create separate labels of each radio button.

“Each of your radio buttons should be nested within its own label element”, they say.

I’m a little confused here because when I used only one label for all of the radio buttons, to me it worked the same way as it did when I used separate labels of each radio button.
Here’s ‘how they want’ snippet of code:

 <button type="submit">Submit</button>
  <label>
    <input type="radio" name="indoor-outdoor"> Indoor
  </label>
  <label>
    <input type="radio" name="indoor-outdoor"> Outdoor 
  </label>

And here’s ‘how I’d like it to be’:

  <button type="submit">Submit</button>
  <label>
    <input type="radio" name="indoor-outdoor"> Indoor
    <input type="radio" name="indoor-outdoor"> Outdoor 
  </label>

Also I’ve tried removing label from everywhere, it still worked. Worked like a charm.
Can someone please explain to me, specifically what is the use of label and when to use it?
Thanks in advance :slight_smile:

You’d use a label for each element as you can match the for property to the id of an input, thus making the label clickable and the input controllable. A perfect example is radio buttons in a form, as you are often able to click the text as well as just the actual button.

Also in the world of email development, I can use a label as a fake button and trigger checkboxes or radio inputs

1 Like