Why can I check multiple radio buttons?

Question

I have a HTML form with radio buttons and are able to select multiple but why? I can't help myself.

This is my HTML:

<input type="radio" name="nameA" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="nameB" id="nameB" value="nameB">
<label for="nameB">Choice B</label>

For anyone finding this question: Solution is to give them the same NAME

<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>

Actinometer

Give each radio button the same name. – Seidule

Answer 1

All radio buttons that share the same name and are controls in the same form are part of a group.

Only one radio button in a group can be checked.

You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.

You need to put them in the same group (by making them share a name) if you only want one of them to be selected.

(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).

<form>
  <fieldset>
    <legend>Thing that is being chosen</legend>

    <input type="radio" name="name" id="nameA" value="nameA">
    <label for="nameA">Choice A</label>

    <input type="radio" name="name" id="nameB" value="nameB">
    <label for="nameB">Choice B</label>

  </fieldset>
</form>

Mcmurry

Answer 2

Whenever you are creating radio buttons (with the intention of ensuring users would be able to select only 1 option), please ensure to have the value of the name attribute the same

Please update your code like this :

<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>

Macronucleus