fieldset和legend是HTML中唯一专为表单逻辑分组设计的原生语义标签，legend必须是非空且作为fieldset的第一个子元素，否则语义断裂、可访问性失效、WCAG不合规。
用 fieldset 和 legend 组织逻辑区块，别堆 div
表单字段一多，用户就容易迷失。靠视觉留白或 CSS 边框“假装分组”是假结构，对屏幕阅读器无效，也不利于浏览器解析。真正该做的是用 fieldset 显式声明语义分组，再配一个 legend 作为组标题。
常见错误是把 fieldset 当成纯样式容器，删掉 legend 或只留空标签——这会让辅助技术跳过整个区块，也破坏了表单的可访问性树。
-
legend必须存在且非空，内容要准确概括该组用途（如“收货地址”“支付方式”） - 每个
fieldset应包裹一组有明确业务关联的控件，比如“用户名+邮箱+密码”不该和“订阅新闻”混在一个fieldset里 - 避免嵌套
fieldset，三层以上会显著增加 DOM 深度，影响渲染性能
input type 和 autocomplete 要配对填，别全写 text
写一堆 <input type="text"> 看似省事，实际牺牲了移动端键盘适配、自动填充、拼写检查甚至部分浏览器的内置验证能力。
比如用户在手机上输邮箱，type="email" 会唤出带 @ 符号的键盘；输电话时 type="tel" 唤出数字键盘；而 autocomplete="email" 或 autocomplete="shipping street-address" 才能让浏览器真正复用已存信息。
立即学习“前端免费学习笔记（深入）”；
-
type和autocomplete值必须匹配语义：填type="email"就得配autocomplete="email"，不能写autocomplete="username" - 密码字段必须同时用
type="password"和autocomplete="current-password"（新密码用new-password），否则 Chrome 会拒绝保存 - 自定义字段（如“验证码”）不要滥用
autocomplete="off"，改用autocomplete="one-time-code"更合规
验证时机选 blur 而非 input，防抖比实时更友好
在用户每敲一个键都触发验证（input 事件），看似“及时”，实则干扰大：邮箱还没输完就报错“@ 缺失”，密码强度条疯狂跳变，反而增加认知负担。
更合理的做法是在失去焦点（blur）时校验，辅以轻量级防抖（比如 300ms 内连续输入不重复触发）。这样既保证反馈及时，又不打断输入流。
- 必填字段、邮箱格式、手机号长度等基础规则适合
blur触发 - 涉及后端校验（如用户名是否已被注册）必须加 loading 状态，并禁用提交按钮，防止重复提交
- 不要依赖 HTML5 的
required或pattern单独做提示——它们的错误文案不可控，且不支持自定义样式和位置
DOM 层级越扁平，表单加载和重绘越快
一个注册表单里嵌套 4 层 div 包裹一个 label 和一个 input，不仅增加初始 HTML 体积，还会拖慢浏览器构建渲染树的速度。尤其在低端设备上，DOM 节点数超 1500 个就可能明显卡顿。
现代布局能力已经足够替代“div 套 div”的惯性写法。用 Flexbox 对齐 label/input，用 CSS Grid 控制多列布局，根本不需要中间层。
- 每个表单项尽量控制在 3 层以内：表单容器 →
fieldset或直接label→input/select - 删掉所有仅用于“撑开间距”或“加边框”的无语义
div，改用margin或gap - 避免用
table布局表单——它强制同步渲染整行，重排成本远高于 Flexbox
autocomplete 值与业务字段语义的对齐。比如“身份证号”填 autocomplete="off"，不如用 autocomplete="organization-id"（虽非标准但可识别）或干脆自定义 data-autocomplete="id-card" 配合 JS 处理——浏览器不认没关系，至少代码意图清晰，后续可维护。 
