HTML复选框怎么设置_HTMLcheckbox复选框的创建与使用技巧-html教程-PHP中文网

HTML复选框怎么设置_HTMLcheckbox复选框的创建与使用技巧

蓮花仙者

发布： 2025-11-21 23:55:02

原创

958人浏览过

复选框通过input标签创建，支持多选、默认选中及JavaScript控制，需注意name属性分组和未选中值不提交的问题。

html复选框怎么设置_htmlcheckbox复选框的创建与使用技巧

在HTML中，复选框（Checkbox）用于让用户从多个选项中选择一个或多个值。它通过 <input> 标签配合 type="checkbox" 来创建。下面详细介绍如何设置和使用HTML复选框。

1. 基本语法：创建一个复选框

使用以下代码可以创建一个简单的复选框：

<input type="checkbox" id="option1" name="feature" value="email">
<label for="option1">启用邮件通知</label>

说明：

type="checkbox"：定义这是一个复选框。
id：为标签关联提供唯一标识。
name：用于表单提交时的字段名，多个复选框可共用同一 name 以组成一组。
value：用户选中时提交的值。
label：提升可访问性，点击文字也能切换复选框状态。

2. 设置默认选中状态

如果希望某个复选框默认被选中，添加 checked 属性即可：

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

<input type="checkbox" id="remember" name="remember" value="yes" checked>
<label for="remember">记住登录状态</label>

也可写成 checked="checked"，但简写形式更常见。

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

108

查看详情

3. 分组与多选功能

当需要用户选择多个选项时，将多个复选框设为相同的 name 属性即可：

<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label><br>

<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label><br>

<input type="checkbox" id="js" name="skills" value="JavaScript">
<label for="js">JavaScript</label>

提交表单后，服务器会收到所有被选中的 skills 值（如：skills=HTML&skills=CSS）。