HTML 表单中，只有带 name 和 value 属性的 元素才会在提交时发送数据；将这些属性放在 上无效，必须绑定到实际的复选框控件本身。

html 表单中，只有带 name 和 value 属性的 <input> 元素才会在提交时发送数据；将这些属性放在 <label></label> 上无效，必须绑定到实际的复选框控件本身。

在使用 CSS 隐藏原生复选框（如 .css-checkbox 类）并用 <label></label> 模拟视觉效果时，一个常见误区是误以为可以将 name 或 value 放在 <label></label> 标签上以实现数据提交。这是错误的：浏览器表单序列化机制只收集具有 name 属性的表单控件（如 <input>、<select></select>、<textarea></textarea>），而 <label></label> 本身不是可提交的表单控件，其 value 属性甚至不是标准 HTML 属性（会被忽略）。

✅ 正确做法是：将 name 和 value 明确设置在 <input type="checkbox"> 元素上：

Selected Option Another Option Submit

? 关键说明：

• 复选框未被勾选时，默认不会提交任何值（即使设置了 value）。因此服务端收到的字段可能是缺失的（如 PHP 中 $_POST['demo_lbl_2'] 不存在），而非 false 或空字符串。若需明确区分“未选”与“已选”，建议：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 使用隐藏同名输入项作为默认值（推荐）：

    <input type="hidden" name="demo_lbl_2" value="false"><input type="checkbox" name="demo_lbl_2" value="true" class="css-checkbox">

  • 或在后端逻辑中主动判断键是否存在（如 Python Flask 的 request.form.get('demo_lbl_2', 'false')）。

• label 的 for 属性仅用于关联点击行为（提升可访问性），不影响数据提交；name 必须保留在 input 上才能被 FormData 或传统表单提交捕获。

? 小贴士：可通过浏览器开发者工具 → Network → Form Data 查看实际提交内容，验证字段是否正确发送。确保每个复选框拥有唯一且语义清晰的 name，避免多选时值覆盖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！