使用 HTML 单选按钮的正确方法？

Question

I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>

Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.

Answer 1

All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.

Here's the documentation for <input type='radio'> which includes:

The "name" setting is an important attribute of radio buttons, as it identifies which group a radio button belongs to. Because groups of radio buttons act as a unit, you must specify a common name for all related radio buttons. When two or more radio buttons share a name, selecting one of the buttons will unselect all of the others with the same name. If you have more than one group of radio buttons on a single page, the buttons in different groups must have different "name" attributes.

Answer 2

Radio buttons are grouped together using the name attribute. give them the same name .

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
   <label for="input-status1" ></label>
   <input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
   <label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
   <label for="input-status2" ></label>
   <input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
   <label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
   <label for="input-status3" ></label>
   <input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
   <label class="radio-label">Option 3</label>
</div>