html单选框代码示例

input的radio类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。

以下是html单选框代码示例：

<p>Select a maintenance drone:</p>

<div>
  <input type="radio" id="huey" name="drone" value="huey"
         checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

选用下面的CSS作为辅助：

p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}

一个单选按钮组由具有相同 name 属性的单选按钮组成。 一旦单选按钮组被建立, 选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。

你可以在一个页面上创建任何你喜欢的单选按钮组, 只要每一组都有一个独特的 name 属性。

举个例子，如果你需要在表单中询问用户的首选联系方式，你可以创建三个 name 属性都为 contact 的单选按钮，不过一个按钮的 value 属性为 email ，另一个的value 属性为 phone，还有一个的value 属性为 mail。用户不会看见 value 属性或 name 属性（除非你故意用代码显示它们）。