表单转化率低的根源在于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> 模拟按钮，会绕过原生校验逻辑，<code>required 和 pattern 全部失效
• 如果要用 JS 控制提交，保留 type="submit"，再在 event.preventDefault() 里拦截，别改 type

fieldset+legend 分组怎么避免反而增加认知负担

分组本身能降低用户心理负荷，但滥用会导致 DOM 层级混乱、辅助技术误读、CSS 难维护。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 只在语义明确的业务模块间用 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 层面预防。

• 给 或容器加 scroll-padding-top: env(safe-area-inset-top)，配合 autofocus 提前预留空间
• 避免在 focus 事件里调 scrollIntoView——此时键盘可能还没弹出，滚动目标错位
• 若必须用 JS 滚动，等 resize 事件（键盘弹出会触发）后再执行 element.scrollIntoView({ block: 'nearest' })

真正拖慢转化的，从来不是“没加功能”，而是 type 写错、name 缺失、hidden 用混、scroll-padding-top 漏设——它们不报错，但用户就是点不动、输不了、看不到按钮。这些细节藏在 HTML 最浅层，却卡在转化漏斗最窄处。