复选框和单选按钮
概述
复选框和单选按钮使用 HTML 标记 <input> 编写，其行为在 HTML 规范中定义。
最简单的复选框或单选按钮是 <input> 元素，type 属性分别为 checkbox 或 radio：
<input type="checkbox">
<input type="radio">
单个独立的复选框元素用于单个二元期权，例如是或否问题。复选框是独立的，这意味着用户可以在一组复选框中选择尽可能多的选项。换句话说，检查一个复选框并没有取消选中复选框组其他复选框。
单选按钮通常分组（如果它没有与另一个单选按钮分组，你可能意味着使用复选框），通过在该组中的所有按钮上使用相同的 name 属性来识别。单选按钮的选择是互斥的，这意味着用户只能从一组单选按钮中选择一个选项。选中单选按钮时，之前检查过的具有相同 name 的任何其他单选按钮都将取消选中。
例：
<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">
查看时，单选按钮显示为圆圈（未选中）或填充圆圈（选中）。复选框显示为正方形（未选中）或填充正方形（已选中）。根据浏览器和操作系统的不同，正方形有时会有圆角。
属性
复选框和单选按钮具有许多属性来控制其行为：
value
与任何其他输入元素一样，value 属性指定在表单提交时与按钮关联的字符串值。但是，复选框和单选按钮的特殊之处在于，当省略该值时，它在提交时默认为 on，而不是发送空值。value 属性未反映在按钮的外观中。
checked
checked 属性指定复选框或单选按钮的初始状态。这是一个布尔属性，可以省略。
其中每个都是有效的，等效的方法来定义一个选中的单选按钮：
<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">
缺少 checked 属性是未经检查按钮的唯一有效语法：
<input type="radio">
<input type="checkbox">
重置 <form> 时，复选框和单选按钮将恢复为 checked 属性的状态。
无障碍
标签
为了给按钮提供上下文并向用户显示每个按钮的用途，每个按钮都应该有一个标签。这可以使用 <label> 元素来包裹按钮。此外，这使标签可以点击，因此你选择相应的按钮。
例：
<label>
<input type="radio" name="color" value="#F00">
Red
</label>
或者使用 <label> 元素并将 for 属性设置为按钮的 id 属性：
<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>
按钮组
由于每个单选按钮影响组中的其他单选按钮，因此通常为整组单选按钮提供标签或上下文。
要为整个组提供标签，单选按钮应包含在 <fieldset> 元素中，其中包含 <legend> 元素。
例：
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>
复选框也可以以类似的方式分组，其中字段集和图例标识相关复选框组。但是，请记住，复选框应该没有，因为他们不是相互排斥的相同的名称。这样做会导致表单为同一个键提交多个值，而不是所有服务器端语言都以相同的方式处理它（未定义的行为）。每个复选框应具有唯一的名称，或使用一组方括号（[]）来指示表单应提交该键的值数组。你选择哪种方法取决于你计划如何处理表单数据客户端或服务器端。你还应该简短地保留图例，因为浏览器和屏幕阅读器的某些组合会在字段集中的每个输入字段之前读取图例。