必须用 fieldset 包裹复选框群组并配 legend 标题，每个复选框需独立 label 绑定；否则屏幕阅读器无法识别分组上下文，后端也无法正确接收数组数据。
HTML 表单不是把 input 往 form 里一塞就完事——结构松散、语义缺失、可访问性差，用户点错位置、屏幕阅读器读不懂、后期加验证或样式都费劲。真正可用的表单，得靠几组关键标签协同工作。
为什么必须用 form 包裹所有控件？
浏览器只认 form 为“提交上下文”。没它，input type="submit" 点了没反应；textarea 或 select 的值根本不会随提交一起发出去；JavaScript 也拿不到完整的表单数据对象（form.elements 为空）。
常见错误：把按钮或输入框写在 form 外面，以为“挨着就行”——实际等于裸奔。
label 和 for 属性怎么配对才有效？
光写 <label>用户名</label><input type="text"> 是无效绑定。必须让 label 的 for 值和 input 的 id 完全一致：
✅ 正确：<label for="username">用户名</label><input type="text" id="username" name="username">
❌ 错误：for="user" 对应 id="username"，或漏写 id。
效果：点击文字焦点自动落到输入框，对触屏和辅助设备至关重要；没这层绑定，移动端用户得精准戳小输入框，体验断层。
用 fieldset + legend 分组时容易忽略什么？
这不是“加个边框好看点”的装饰标签，而是语义分组的核心机制：
• fieldset 会天然禁用内部所有控件（当它自身设 disabled 时），比手动遍历 input 更可靠；
• legend 必须是 fieldset 的第一个子元素，否则语义失效，部分屏幕阅读器直接跳过；
• 不要嵌套 fieldset（除非极特殊场景），浏览器对多层嵌套支持不一，CSS 重置也麻烦；
• 如果只是视觉分隔，别硬套 fieldset——它自带边框和外边距，纯样式需求用 div + class 更轻量。
立即学习“前端免费学习笔记（深入）”；
表单提交前，enctype 选错会卡在哪？
这个属性只在 method="post" 时生效，但很多人直接忽略：
• 普通文本提交（无文件）：默认 enctype="application/x-www-form-urlencoded"，安全可靠；
• 含 input type="file"：必须显式设 enctype="multipart/form-data"，否则文件字段值为空字符串，后端收不到二进制数据；
• 用 enctype="text/plain" 的极少，仅调试时看原始键值对，生产环境不用；
坑点：Vue/React 项目里用原生 form 提交文件时，常因忘记改 enctype 导致上传失败，错误日志里却只显示“空文件”，排查方向容易跑偏。
