表单提交按钮无反应，首要检查 type 是否为 submit 而非 button；required 通过但后端收不到数据，需确认 name 属性有效且合法；防误关页应基于 isdirty 标志判断真实改动；移动端键盘遮挡优先用 autofocus 加 scroll-padding-top 解决。
表单提交按钮点击没反应？检查 type="submit" 是否被误写成 type="button"
很多前端同学在调试时发现表单点了没反应，第一反应是 JS 绑定错了，其实八成是按钮类型写错了。浏览器只会在 type="submit" 的按钮被点击时触发表单默认提交行为（包括触发表单验证、submit 事件等）；而 type="button" 完全不参与表单流程，哪怕它在 <form></form> 里也毫无作用。
常见错误场景：
- 复制粘贴别人代码时漏改
type属性 - 用 UI 组件库生成按钮，默认给的是
type="button"（比如某些 React Button 组件） - 为防止重复提交加了
disabled，但忘了恢复时同步检查type
实操建议：
- 手动检查所有表单内按钮的
type属性，确保提交用的按钮是type="submit" - 如果要用 JS 控制提交逻辑，保留
type="submit"，然后在event.preventDefault()中拦截，而不是改成button - 避免用
<input type="image">或自定义标签模拟提交按钮——它们不会触发原生表单验证
用户填一半就关页？加 beforeunload 提示前先判断字段是否真有改动
直接监听 beforeunload 弹“确定要离开吗？”看似防流失，实际会激怒用户：刚点进页面还没输任何内容，或者只点了下输入框又点别处，就弹提示。浏览器要求该事件必须基于“用户确实修改了表单”，否则会被静默忽略或降权。
立即学习“前端免费学习笔记（深入）”；
关键不是有没有监听，而是怎么判断“已改动”：
- 不要用
focus/blur判断——点进去又出来不算改动 - 不要只比对初始值和当前值字符串——空格、换行、大小写变化可能无关紧要
- 推荐在第一个
input或textarea的input事件中设一个isDirty标志位，之后所有提交/跳转逻辑都查这个标志
示例逻辑（不依赖框架）：
let isDirty = false;
document.querySelectorAll('input, textarea, select').forEach(el => {
el.addEventListener('input', () => { isDirty = true; });
});
window.addEventListener('beforeunload', e => {
if (isDirty) e.returnValue = '';
});
移动端键盘遮挡输入框？别只靠 scrollIntoView，优先用 autofocus + scroll-padding-top
在 iOS Safari 或部分安卓 WebView 中，scrollIntoView 常常失效或滚动过度，导致输入框被键盘盖住。根本原因不是 JS 调用不对，而是浏览器对软键盘唤起时机和布局重排的处理不一致。
更稳的组合方案：
- 给首个可编辑字段加
autofocus属性（注意：仅限用户主动触发的页面，如弹窗表单需配合用户手势） - CSS 中设置
html { scroll-padding-top: env(safe-area-inset-top, 0); }，让scrollIntoView自动避开刘海和键盘区域 - 避免在
focus回调里立刻调scrollIntoView({ behavior: 'smooth' })——iOS 下 smooth 滚动常被中断，改用{ behavior: 'auto' }
额外提醒：若表单在 modal 中，modal 容器需设 position: fixed 且 top: 0，否则键盘弹出时 viewport 高度变化会导致定位错乱。
required 属性校验通过了，后端还收不到数据？检查 name 属性是否为空或含非法字符
HTML 表单提交时，只有带有效 name 的控件才会被序列化进请求体（application/x-www-form-urlencoded 或 multipart/form-data）。required 只控制前端校验，跟数据能否发出去完全无关。
高频翻车点：
-
name值为空字符串：<input name="">→ 不上传 -
name含空格或特殊符号（如user name、email[0]），后端解析失败或被过滤 - 用了
id当name（尤其从设计稿直接抄 ID 过来） - 动态渲染表单时，JS 拼接
name出现拼错、未转义（如name="user.${index}.email"未正确插值）
验证方法很简单：打开 DevTools → Network → 点提交 → 查看 Form Data 标签页，确认字段名是否出现、是否与后端约定一致。别信 JS console.log 出来的值，那只是 DOM 状态，不是真实发送内容。
表单转化率真正的瓶颈，往往不在样式或文案，而在这些浏览器底层机制和协议细节上。改一个 name、调一次 scroll-padding-top、多判一个 isDirty，比堆 CSS 动画实在得多。
