必须用id+for显式绑定或label包裹input，fieldset需含legend实现语义分组，grid布局替代float/table，含file时enctype必设为multipart/form-data。
label 与 input 必须用 id + for 绑定，否则点击无效且无障碍失效
常见错误是写成 <label>用户名</label><input type="text" name="username">，没加 id 和 for。结果是：用户点文字无法聚焦输入框，屏幕阅读器读不出关联关系，WCAG 2.1 直接不达标。
正确做法只有两种：
– 显式绑定：<label for="username">用户名</label><input type="text" id="username" name="username">
– 隐式包裹：<label>用户名<input type="text" name="username"></label>
- 显式绑定更可控，尤其适合动态插入或复杂布局（如 grid 中 label 和 input 分开定位）
- 隐式包裹在 SSR 场景下简洁，但不能用于
<input type="radio">多个同名项——每个 radio 都得单独配<label for="xxx"></label> - id 值必须唯一、不能含空格或特殊字符，否则 JS 查询
document.getElementById()或 CSS 选择器会出错
fieldset/legend 不是“加边框”，而是逻辑分组和可访问性刚需
很多开发者只把 <fieldset></fieldset> 当作视觉装饰，删掉也不影响功能。但实际中，它承担两项不可替代职责：一是告诉屏幕阅读器“这组控件属于同一语义范畴”，二是让键盘导航时能用 Tab 进入/退出整组（配合 disabled 可批量禁用）。
典型误用：<fieldset><div>
<label>...</label><input>
</div></fieldset> —— <legend></legend> 缺失，<fieldset></fieldset> 就退化为普通容器，辅助技术完全忽略。
立即学习“前端免费学习笔记（深入）”；
-
<legend></legend>必须是<fieldset></fieldset>的第一个子元素，且不能用display: none隐藏 - 视觉上想隐藏
<legend></legend>？用clip-path: inset(100%)或position: absolute; left: -9999px，保留可读性 - 单个字段也建议包
<fieldset></fieldset>，比如登录页的“记住我”复选框——它和账号密码属不同逻辑层，不该混在同一个组里
用 display: grid 布局表单行，别碰 float 或 table
老项目里还见得到 <table> 布局表单，或用 <code>float: left 强行对齐 label 和 input。这两种方式在响应式、高缩放比、暗色模式下极易崩坏，且语义错误。
现代方案只需 5 行 CSS：.form-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }。label 占固定宽，input 自适应，gap 控制间距，align-items: center 解决 baseline 对不齐问题。
- 移动端断点直接改
grid-template-columns: 1fr，无需重写 HTML 结构 - 避免用
width+margin模拟对齐——内容变长时 label 撑开，input 被挤到下一行 - 如果 label 文字超长需换行，给
label加white-space: normal，别依赖nowrap
enctype 属性漏设会导致文件上传失败，且无明确报错
当表单含 <input type="file">，但 <form></form> 没写 enctype="multipart/form-data"，浏览器仍会提交，后端收到的却是空文件或乱码。Node.js 的 multer、PHP 的 $_FILES 全部为空，控制台和 Network 面板几乎不报错，排查成本极高。
- 只要表单里有任何
type="file"，enctype就必须是multipart/form-data，method必须是post -
application/x-www-form-urlencoded（默认值）只传键值对，二进制文件会被丢弃 - 不要试图用 JS 在 submit 事件里动态改
enctype——浏览器已按初始值编码，改了也无效
