必须显式绑定label与input、用fieldset/legend逻辑分组、禁用float/table布局、file上传时显式声明enctype="multipart/form-data"且method为post，四者缺一不可。
label 和 input 必须显式绑定，否则点击无效且无障碍失效
用户点“用户名”文字却无法聚焦输入框，不是样式问题，是语义缺失。常见错误写法：<label>用户名</label><input type="text" name="username">——id和for全缺，屏幕阅读器读不出关联，WCAG 2.1 直接不达标。
正确做法只有两种：
- 显式绑定：
<label for="username">用户名</label><input type="text" id="username" name="username">（推荐，尤其适合动态插入或 Grid 布局中 label/input 分离） - 隐式包裹：
<label>用户名<input type="text" name="username"></label>（SSR 场景简洁，但type="radio"多个同名项必须用显式绑定，每个都得配独立id）
id 值必须唯一、不能含空格或特殊字符；否则 document.getElementById() 或 CSS 选择器会失效。
fieldset/legend 不是加边框，而是逻辑分组与可访问性刚需
删掉 <fieldset></fieldset> 表单还能跑，但键盘 Tab 导航进不了整组、屏幕阅读器读不出“这组是登录凭证”，disabled 也无法批量禁用——它不是装饰，是语义骨架。
典型误用：<fieldset><div>
<label></label><input>
</div></fieldset>，<legend></legend> 缺失，<fieldset></fieldset> 就退化成普通容器，辅助技术完全忽略。
必须遵守的硬规则：
-
<legend></legend>是<fieldset></fieldset>的第一个子元素，不可省略 - 视觉上不想显示
<legend></legend>？用clip-path: inset(100%)或position: absolute; left: -9999px，别用display: none - 单个字段也建议包
<fieldset></fieldset>，比如“记住我”复选框，它和账号密码属不同逻辑层
用 display: grid 布局表单行，别碰 float 或 table
float: left 对齐 label 和 input，或用 <table> 布局表单，在高缩放比、暗色模式、响应式断点下极易错位，且语义错误——表格不是布局工具。
<p>现代方案只需 5 行 CSS：</p>
<pre class="brush:php;toolbar:false;">.form-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px;
align-items: center;
}</pre>
<p>效果：label 固宽、input 自适应、gap 控制间距、<code>align-items: center 解决 baseline 对不齐。移动端断点直接加 @media 调整列宽即可。
enctype="multipart/form-data" 必须显式声明，否则 file 上传失败
只要表单里有 <input type="file">，<form></form> 就必须设 enctype="multipart/form-data"。漏写会导致后端收不到文件，只收到空字段，且浏览器不报错、控制台无提示——这是最隐蔽的上传失败原因。
其他 enctype 值基本不用：
-
application/x-www-form-urlencoded（默认）：适合纯文本字段 -
text/plain：调试用，实际几乎不用 -
multipart/form-data：仅此一种支持二进制文件上传
注意：method 必须为 POST，GET 不支持文件上传。
label 绑定、fieldset 包裹、legend 存在、enctype 正确，四者缺一不可。任何一处断裂，都会在无障碍、键盘导航或文件上传环节暴露出来，而且往往等到上线后才被真实用户发现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
