表单转化率低的根源在于HTML细节错误而非功能缺失：type="button"替代submit导致提交失效，fieldset滥用增加认知负担，hidden与display:none混用引发数据异常，移动端键盘遮挡需scroll-padding-top预防。
表单转化率低，往往不是用户不想填，而是设计在无形中设置了障碍——比如字段太多、校验太晚、按钮没反应、键盘一弹就遮住输入框。简化设计不等于删字段，而是砍掉所有干扰用户完成动作的冗余环节。
为什么type="submit"写成type="button"会直接卡死转化漏斗
浏览器只对type="submit"触发原生校验、submit事件和 Enter 键提交；type="button"只是个空壳，点十次也不会提交，控制台还不报错。
- React 或 Vue 组件库生成的按钮默认是
type="button"，必须显式覆写为type="submit" - 用
<input type="image">或<div>模拟按钮，会绕过原生校验逻辑，required和pattern全部失效 - 如果要用 JS 控制提交，保留
type="submit"，再在event.preventDefault()里拦截，别改 type
fieldset+legend 分组怎么避免反而增加认知负担
分组本身能降低用户心理负荷，但滥用会导致 DOM 层级混乱、辅助技术误读、CSS 难维护。
- 只在语义明确的业务模块间用
fieldset，比如「收货信息」「发票信息」，别按「省/市/区」这种粒度拆 -
legend必须存在且唯一，空<legend></legend>会让屏幕阅读器跳过整个分组 - Chrome 对嵌套超过 3 层的
fieldset有渲染延迟，同级分组更安全 - 不用
fieldset包单个input——它不是div替代品，语义和行为都不匹配
hidden 属性和 display: none 在表单提交时行为完全不同
hidden 让浏览器彻底忽略该元素：不参与校验、不进 FormData、不出现在 form.elements 列表里；display: none 只是隐藏，字段照常提交。
立即学习“前端免费学习笔记（深入）”；
- 切换字段显隐优先用
element.hidden = true/false，别操作 class 或 style - 如果后端必须接收空值字段，那就得用
display: none+ 手动清空value，否则可能带脏数据 - Safari 旧版本（iOS 9.3 以下）不支持
hidden，需降级 fallback
移动端输入框被键盘遮挡，autofocus 不够还得配 scroll-padding-top
scrollIntoView 在 iOS Safari 和部分安卓 WebView 中经常失效或滚动过度；单纯靠 JS 滚动不如从 CSS 层面预防。
- 给
<body>或容器加scroll-padding-top: env(safe-area-inset-top)，配合autofocus提前预留空间 - 避免在
focus事件里调scrollIntoView——此时键盘可能还没弹出，滚动目标错位 - 若必须用 JS 滚动，等
resize事件（键盘弹出会触发）后再执行element.scrollIntoView({ block: 'nearest' })
真正拖慢转化的，从来不是“没加功能”，而是 type 写错、name 缺失、hidden 用混、scroll-padding-top 漏设——它们不报错，但用户就是点不动、输不了、看不到按钮。这些细节藏在 HTML 最浅层，却卡在转化漏斗最窄处。
