如何直观地对单选按钮进行分组？

Question

您好，我正在尝试制作一个表单，但我被阻止了，因为我不知道如何制作单选按钮组

下面是我的代码：

​

<!-- Pose des poteaux -->

<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
    <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
    <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
    <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
    <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
    <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
  </label>
</div>

<!-- 2nd group -->
  <br>
  <div>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
    <input type="radio" id="option-4" class="mdl-radio__button" name="options" value="4" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
    <input type="radio" id="option-5" class="mdl-radio__button" name="options" value="5" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
  </label>
</div>

​

它应该有两组单选按钮，但仍然不起作用。

Answer 1

只需为组2中的按钮指定一个不同的名称

​

<!-- Pose des poteaux -->

<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
    <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
    <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
    <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
    <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
    <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
  </label>
</div>

<!-- 2nd group -->
  <br>
  <div>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
    <input type="radio" id="option-4" class="mdl-radio__button" name="options2" value="4" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
    <input type="radio" id="option-5" class="mdl-radio__button" name="options2" value="5" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
  </label>
</div>

​