The ID element for Radio Buttons

HTML-CSS
1

I am studying how to code for radio buttons at https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons/

This is what the tutorial says about ID elements (for use in conjunction with radio buttons):

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:

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

Here are my questions:

(1) What are the “assistive technologies” that have been alluded to?

(2) If I am trying to code radio buttons with the intent of having the user chose between one of two options, does it matter whether both buttons share the same ID value?

For example:

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

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

  </form>

This code produces two radio buttons, and only one of them can be selected. But so does this code:

<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>

  </form>
</main>

  </form>

What you’ll notice between the two sets of code is that in the first instance, both radio buttons have the same ID values, whereas in the second instance, they have differing ID values. But as far as the output is concerned, I can’t see any difference.

2 Likes
2

Nope, ID’s should not be repeated not only on radio buttons, but for any elements.

This produces one radio button, the use of ID here is to call the label using for, both ID and for should match
Well what it does.?

After you create the above radio button with label, try clicking the text called Indoor in your layout, when you click the text, the radio button will be selected, and that’s the connection between the ID and `for’ attributes.

What if you set same ID for both buttons.?, then the above functionality cannot be achieved.

1 Like
3

I am new to using the help forums here. When I save my post, why does all of my code get transformed into just “Indoor Outdoor”? Are you able to see the code I used?

4

You should use three backticks (```) at the start and place your code after that and at the end of your code add three more backticks(```) , so that your code will be visible

1 Like
5

Thank you for telling me that. Such information was not apparent from the tutorial, and both sets of code satisfied the parameters of the challenge in spite of what you said.

6

Thanks again. I don’t think I’ve EVER used ‘back-ticks’ before, or even heard someone refer to them until you came along to help me.

7

Yes because it is not in the test case, therefore it is not checked, but the whole point of using that was explained to you in my post above, you can use ID’s but shouldn’t duplicate it

8

You can also use this symbol in your message editor box (</>) and place the code between those, when you are new to the FCC it happens, well you will learn it along the way, Welcome to FCC

1 Like
9

Hi Sujith,

Thanks to your reply, I understand that when I am coding radio buttons, the ID assign one button should never be used for any of the other buttons. However, would there be a problem if all of my radio buttons have unique IDs but share the same attribute?

My understanding is that it is necessary for the radio buttons to share the same name attribute, so that it will be impossible for me to select more than one radio button.

10

Yes, the name attribute (elements inside the tags are called attributes) should be same so that only one radio button is selected (Radio buttons are used for creating yes/no questions).

If you want multiple options to be selected, you can use checkbox

1 Like