当用户必须从一组项目中只进行一次选择时，会使用单选按钮。 for属性对于将我们的自定义单选按钮与输入绑定是必要的。将input的id的值作为labelfor属性的值。

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

红

黄

绿

棕色

  <form action="#">
    <p>
      <label>
        <input name="group1" type="radio" checked />
        <span>红</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>黄</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio"  />
        <span>绿</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" disabled="disabled" />
        <span>棕色</span>
      </label>
    </p>
  </form>
        

带间隙

要创建一个带有间隙的单选按钮，请在input中添加class="with-gap"请参阅下面的示例。

红色

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