菜单

当用户必须从一组项目中仅选择一个时，使用单选按钮。 for 属性对于将自定义单选按钮与输入绑定是必需的。将输入的 id 添加为标签的 for 属性的值。

通过为组中的每个单选按钮添加 name 属性以及相同的对应值，将单选按钮添加到组中。通过添加 disabled 属性（如下所示）创建禁用的单选按钮。



  <form action="#">
    <p>
      <label>
        <input name="group1" type="radio" checked />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>

带间隙

要创建带间隙的单选按钮，请将 class="with-gap" 添加到输入中。请看下面的示例。


  <p>
    <label>
      <input class="with-gap" name="group3" type="radio" checked />
      <span>Red</span>
    </label>
  </p>