HTML复选框和单选框怎么设置？input type="checkbox"和radio的区别？-html教程-PHP中文网

复选框允许多选，单选框强制单选，两者均通过input标签实现，关键区别在于交互行为和name属性的使用。

$html复选框和单选框怎么设置？input type=\$

HTML复选框（checkbox）和单选框（radio）在网页表单中扮演着不同的角色，它们都通过

<input>

登录后复制

标签实现，核心区别在于它们的交互行为和用途。简单来说，复选框允许用户从多个选项中选择任意数量（包括零个或全部），而单选框则强制用户从一组预设选项中只能选择一个。设置上，它们都依赖

type

登录后复制

、

name

登录后复制

和

value

登录后复制

等属性，但单选框要实现互斥选择，必须共享同一个

name

登录后复制

属性。

解决方案

要设置HTML的复选框和单选框，关键在于理解

input

登录后复制

标签的几个核心属性。

复选框 (Checkbox):

复选框允许用户选择零个、一个或多个选项。

立即学习“前端免费学习笔记（深入）”；

<input type="checkbox" id="option1" name="preferences" value="email_newsletter">
<label for="option1">订阅邮件通知</label><br>

<input type="checkbox" id="option2" name="preferences" value="sms_alerts">
<label for="option2">接收短信提醒</label><br>

<input type="checkbox" id="option3" name="preferences" value="app_notifications" checked>
<label for="option3">开启应用内通知</label>

登录后复制

type="checkbox"
登录后复制
: 明确这是个复选框。
id
登录后复制
: 唯一标识符，用于与
```
<label>
```
登录后复制
标签关联，提升可点击区域和可访问性。
name
登录后复制
: 这个属性非常重要。当多个复选框属于同一逻辑组时，它们可以共享同一个
```
name
```
登录后复制
（例如上面的
```
preferences
```
登录后复制
）。表单提交时，所有被选中的、拥有相同
```
name
```
登录后复制
的复选框的
```
value
```
登录后复制
都会被发送。如果每个复选框的
```
name
```
登录后复制
都不同，它们就各自独立。
value
登录后复制
: 当复选框被选中并提交时，这个
```
value
```
登录后复制
属性的值会被发送到服务器。如果
```
value
```
登录后复制
未设置，默认会发送
```
on
```
登录后复制
。
checked
登录后复制
: 一个布尔属性，如果存在，表示该复选框在页面加载时默认处于选中状态。
<label for="id">
登录后复制
: 强烈建议使用
```
<label>
```
登录后复制
标签，并通过
```
for
```
登录后复制
属性与
```
input
```
登录后复制
的
```
id
```
登录后复制
关联。这样用户点击文本也能选中/取消选中复选框，大大提升用户体验，对辅助技术也更友好。

单选框 (Radio Button):

单选框用于从一组互斥的选项中选择一个。

<p>请选择您的性别:</p>
<input type="radio" id="gender_male" name="gender" value="male">
<label for="gender_male">男</label><br>

<input type="radio" id="gender_female" name="gender" value="female">
<label for="gender_female">女</label><br>

<input type="radio" id="gender_other" name="gender" value="other" checked>
<label for="gender_other">其他</label>

登录后复制

type="radio"
登录后复制
: 明确这是个单选框。
id
登录后复制
: 同复选框，用于与
```
<label>
```
登录后复制
关联。
name
登录后复制
: 这是单选框实现互斥选择的关键！ 同一组中的所有单选框必须拥有相同的
```
name
```
登录后复制
属性。当用户选择其中一个时，同
```
name
```
登录后复制
组中的其他单选框会自动取消选中。
value
登录后复制
: 同复选框，当单选框被选中并提交时，这个
```
value
```
登录后复制
属性的值会被发送。
checked
登录后复制
: 同复选框，表示默认选中。在一个单选框组中，通常只设置一个
```
checked
```
登录后复制
，如果设置多个，浏览器会选择最后一个
```
checked
```
登录后复制
的。
<label for="id">
登录后复制
: 同复选框，用于提升用户体验和可访问性。

如何确保单选框的互斥选择行为？

单选框的互斥行为，即同一组中只能选择一个选项，完全依赖于

name

登录后复制

属性。这是个非常基础但又极其重要的点，我见过不少新手开发者在这里犯迷糊。如果你想让一组单选框表现出“多选一”的特性，比如“选择性别”、“选择学历”，那么这组选项中的所有

<input type="radio">

登录后复制

标签，它们的

name

登录后复制

属性值必须完全相同。

举个例子，如果你有三个单选框用于选择颜色：

<!-- 正确的互斥组 -->
<input type="radio" id="color_red" name="chosen_color" value="red">
<label for="color_red">红色</label>

<input type="radio" id="color_blue" name="chosen_color" value="blue">
<label for="color_blue">蓝色</label>

<input type="radio" id="color_green" name="chosen_color" value="green">
<label for="color_green">绿色</label>

登录后复制

这里，无论你点击“红色”、“蓝色”还是“绿色”，因为它们的

name

登录后复制

都是

chosen_color

登录后复制

，所以你最终只能选中其中一个。如果你不小心把某个

name

登录后复制

写成了

chosen_color_blue

登录后复制

，那么这个单选框就会脱离原有的组，变成一个独立的选项，这显然不是我们想要的。所以，务必仔细检查

name

登录后复制

属性的一致性。同时，每个单选框的

value

登录后复制

属性应该是唯一的，这样在表单提交时才能准确区分用户选择了哪个选项。

复选框和单选框在表单提交时如何获取值？

当用户填写完表单并提交时，无论是复选框还是单选框，只有那些处于“选中”（

checked

登录后复制

）状态的元素，它们的

name

登录后复制

和

value

登录后复制

属性才会被发送到服务器。未被选中的元素则不会被提交。

对于单选框，因为其互斥性，在一个拥有相同

name

登录后复制

的组中，只会有一个单选框被选中。因此，当表单提交时，服务器只会收到该

name

登录后复制

对应的一个值。例如，如果你的单选框组

name="gender"

登录后复制

，用户选择了“female”，那么提交的数据中就会有

gender=female

登录后复制

。

协和·太初

国内首个针对罕见病领域的AI大模型

查看详情

而复选框则有所不同。如果多个复选框拥有相同的

name

登录后复制

（比如

name="interests"

登录后复制

），并且用户选中了多个，那么在表单提交时，服务器会收到一个包含所有选中

value

登录后复制

的数组或列表。例如，用户选择了“阅读”和“编程”两个兴趣，如果它们的

name

登录后复制

都是

interests

登录后复制

，那么提交的数据可能会是

interests=reading&interests=coding

登录后复制

（这取决于后端语言和框架如何解析），后端通常会将其解析为一个数组：

['reading', 'coding']

登录后复制

。如果每个复选框的

name

登录后复制

都是唯一的，那么它们会作为独立的键值对被提交，例如

read_book=on&code_program=on

登录后复制

（如果

value

登录后复制

没设就是

on

登录后复制

）。

理解这一点对于后端开发人员处理表单数据至关重要，因为他们需要知道如何预期接收这些数据，是单个值还是一个值列表。

提升复选框和单选框用户体验与可访问性的技巧有哪些？

提升这些小控件的用户体验和可访问性，不只是为了满足规范，更是为了让你的网站更易用，服务更多人群。

一个最基本但又极其重要的技巧是始终使用

<label>

登录后复制

标签，并将其

for

登录后复制

属性与

input

登录后复制

元素的

id

登录后复制

属性关联起来。我经常看到一些网站只是简单地把文本放在

input

登录后复制

旁边，但没有用

label

登录后复制

包起来或者关联。这样做的后果是，用户只能精确点击到那个小小的方块或圆形才能选中/取消选中，这在移动设备上尤其让人抓狂。有了

label

登录后复制

，用户点击旁边的文字也能触发选择，这大大增加了可点击区域，提升了操作的便捷性。

除了

label

登录后复制

，还有几个方面值得考虑：

视觉分组与语义化： 当你有一组相关的复选框或单选框时，使用
```
<fieldset>
```
登录后复制
和
```
<legend>
```
登录后复制
标签来对其进行语义化分组。
```
<fieldset>
```
登录后复制
会给这组控件添加一个边框，而
```
<legend>
```
登录后复制
则作为这组控件的标题。这不仅在视觉上清晰，对于屏幕阅读器等辅助技术来说，也能更好地理解这组选项的上下文。例如：
```
<fieldset>
    <legend>您喜欢的编程语言是？</legend>
    <input type="checkbox" id="lang_js" name="prog_lang" value="javascript">
    <label for="lang_js">JavaScript</label><br>
    <input type="checkbox" id="lang_py" name="prog_lang" value="python">
    <label for="lang_py">Python</label>
</fieldset>
```
登录后复制
默认选中： 考虑用户最常选择的选项，并使用
```
checked
```
登录后复制
属性将其默认选中。这可以减少用户的操作，提高填写效率。但要注意，在单选框组中，通常只能有一个默认选中。
禁用状态： 如果某个选项在特定条件下不可用，可以使用
```
disabled
```
登录后复制
属性。被禁用的控件不会被提交到服务器，并且通常会以灰色显示，提示用户该选项不可用。
键盘导航： 浏览器默认支持通过Tab键在表单控件之间切换，并通过空格键选中/取消选中复选框或单选框。确保你的页面布局不会干扰这种默认的键盘导航顺序，让所有用户都能流畅地操作。