应使用 fieldset 和 legend 替代 div 套娃，因其语义清晰、支持自动禁用、利于可访问性和样式统一；表单控件必须用 for/id 绑定 label；优先采用 required/type/pattern 等原生验证；提交按钮需显式声明 form 属性。
用 fieldset 和 legend 替代一堆 div 包裹
表单结构混乱往往不是因为逻辑复杂，而是用 div 无差别套娃。浏览器原生的 fieldset 不仅语义清晰，还能自动关联 legend 作为组标题，屏幕阅读器能正确播报，CSS 也更容易统一控制边框、间距和禁用态样式。
- 把同类输入控件（如“联系信息”下的
email、phone）包进一个fieldset，用legend标注 - 禁用整组时，只需给
fieldset加disabled属性，内部所有input、select自动失效，无需逐个加disabled - 避免嵌套多层
div+ 类名（如form-group→input-wrapper），那只是在模拟语义，不如直接用语义化标签
表单控件必须绑定 label，且优先用 for + id
没绑定 label 的 input 是可访问性黑洞，也会让点击区域变小——用户点文字无法聚焦输入框，移动端尤其难操作。用 for 显式关联比把 input 套进 label 更可控，尤其适合需要插入图标、按钮或复杂布局的场景。
-
label的for值必须严格等于对应input的id，大小写、空格、连字符都不能错 - 避免用
name或class模拟关联，它们不被辅助技术识别 - 如果用了框架（如 React），确保生成的
id是唯一且稳定的，别用Math.random()或索引拼接，否则 SSR 和 hydrate 会出问题
验证逻辑尽量交给 required、type、pattern 等原生属性
手写 JS 验证容易漏边界情况，比如空格截断、大小写敏感、国际化输入（如邮箱含中文 IDN）。浏览器原生验证虽简单，但覆盖了绝大多数基础场景，且触发时机合理（提交时 + 失焦后），还自带国际化提示文案。
-
type="email"比正则/^.+@.+\..+$/更准，能识别user+tag@example.com这类合法格式 -
minlength/maxlength比 JS 字符计数更可靠，尤其处理 emoji 或代理对（surrogate pairs）时 - 慎用
pattern：它只在非空时校验，且正则不支持g或m标志；需要复杂规则时，再退到 JS，但先用原生兜底
提交按钮别只靠 type="submit"，要明确 form 属性指向
页面多个表单共存时（比如侧边栏搜索 + 主体注册表），按钮默认提交最近的 form，极易误触。显式声明 form 属性，能让按钮脱离 DOM 位置限制，也方便抽离成复用组件。
立即学习“前端免费学习笔记（深入）”；
- 给
form设唯一id（如id="signup-form"），按钮加form="signup-form" - 不要依赖按钮是否在
form内部来判断归属，DOM 移动或模板拆分后容易失效 - 如果按钮是动态渲染的（如通过 JS 插入），确保
form元素已存在且id可被引用，否则提交会静默失败
div，就少一个 CSS 选择器冲突的隐患。真正难的从来不是怎么写，而是敢不敢删。 
