Radio buttons problem - Label Tag

HTML-CSS
1

Create a Set of Radio Buttons

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

Everything appears to be working. So what am i doing wrong as I get this message:

Each of your two radio button elements should be nested in its own label element.

I though i had put them in their own

2

This input is above the label, not inside of the label.

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

Thank you. I did what you suggested and it works. Could you please check my understanding of this?

  1. The LABEL tag is simply that, so if you click on the text ‘Indoor’ it will select that option
  1. NAME is to create a group of options so only 1 can be selected at a time.

3)In this case what does INPUT ID do? Does this represent the value that is sent to the server? So 'outdoor ’ or ‘indoor’?

4

The input is the actual radio button you click. The label helps other code, such as assistive features, understand the HTML.

5

So what does this do ?

input id="indoor"
6

That’s the HTML element id for the input.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.