按钮必须在<form>内且type="submit"才触发表单提交；若在外或省略type则无效；可用form.submit()或dispatchEvent('submit')手动提交，但需注意事件触发差异。
按钮必须在 <form> 内部才能触发表单提交
浏览器只会在 <button> 或 <input type="submit"> 位于 <form> 元素内部时，才默认将其行为绑定为提交该表单。如果按钮在表单外，点击完全不会触发提交——这是最常见的“点不动”原因。
- ✅ 正确写法：
<form action="/login"> <input name="username"> <button type="submit">登录</button> </form>
- ❌ 错误写法：
<form action="/login"> <input name="username"> </form> <button type="submit">登录</button> <!-- 不在 form 内，无效 -->
-
type="submit"不能省略：默认type是"button"（无行为），不是"submit"
button 和 input[type="submit"] 的实际差异
两者都能提交，但 DOM 行为和样式控制略有不同：
-
<button type="submit">支持 HTML 内容（比如加<svg>或换行），<input>只能用value属性设文本 -
<button>在部分旧版 IE 中可能提交空字符串作为name值（若没设name），而<input>更稳定 - 若需 JavaScript 拦截提交，两者都可通过
event.preventDefault()阻止，但<button>更容易添加自定义属性（如data-action="login"）
用 JavaScript 主动提交时别漏掉 form.submit()
如果按钮不在表单内、或想动态指定提交目标，就得手动调用 submit() 方法。注意这不是触发 click 事件，而是直接提交——所以不会触发 submit 事件监听器，除非你显式派发。
- 正确获取并提交：
const form = document.querySelector('#myForm'); document.querySelector('#triggerBtn').addEventListener('click', () => { form.submit(); // 真正提交，不走事件流 }); - 若想保留
submit事件（比如做校验），应改用：form.dispatchEvent(new Event('submit', { cancelable: true }));然后在form.addEventListener('submit', ...)里处理 - 不要写
form.click()或btn.click()—— 这不会提交表单
常见提交失败的隐蔽原因
即使按钮位置和类型都对，也可能因以下原因静默失败：
立即学习“前端免费学习笔记（深入）”；
- 表单有
novalidate属性，但字段含required且为空 → 浏览器仍会阻止提交（novalidate只禁用内置校验提示，不绕过约束检查） -
<form>缺少action，且页面没监听submit事件 → 提交后刷新当前页（GET 请求），看似“没反应” - 按钮被 CSS 设置了
pointer-events: none或覆盖在其他元素下，实际未点中 - 移动端 Safari 对
<button>的 focus/active 状态处理较特殊，偶尔导致点击穿透或延迟，可加cursor: pointer和-webkit-tap-highlight-color: transparent
表单提交看着简单，但 form 作用域、type 默认值、事件触发时机这三处最容易漏看。调试时先查按钮是否真被 click 到，再确认它所属的 form 是否存在且配置合理。
