点击 input type="submit" 后，表单数据由浏览器自动收集成功控件值并按 form 的 method 和 action 发起 HTTP 请求；按钮仅触发提交，非主动发送。
点击 input type="submit 后，表单数据到底怎么发出去的？
它不是“自己发”，而是触发所属 <form> 的默认提交行为。只要按钮在表单内（且没被 type="button" 或 onclick="return false" 阻止），点击就会启动表单提交流程：收集所有成功控件的值、按 method 和 action 发起 HTTP 请求。
常见误解是以为按钮“发送数据”，其实它只是个触发器；真正组装和发送的是浏览器对 <form> 的原生处理逻辑。
submit 按钮不生效？先检查这三件事
多数问题出在表单结构或属性缺失，而非按钮本身：
-
<input type="submit">必须位于有效的<form>标签内部，不能靠 JS 动态挂载后就认为“属于表单”——DOM 位置决定归属 -
<form>必须有action属性（哪怕为空字符串），否则部分浏览器（如 Safari）会静默忽略提交 - 表单内如果有
name重复的控件（比如两个<input name="id">），只有第一个的值会被提交，容易误判为“没传过去”
用 JS 拦截提交时，event.preventDefault() 必须在正确时机调用
如果给表单绑了 submit 事件监听器，但没阻止默认行为，页面仍会跳转或刷新：
立即学习“前端免费学习笔记（深入）”；
form.addEventListener('submit', function(e) {
// ✅ 正确：在验证前/后立刻调用
e.preventDefault();
// 后续可手动 fetch 提交，或做校验
if (validate()) {
fetch(form.action, {
method: form.method || 'GET',
body: new FormData(form)
});
}
});
注意：e.preventDefault() 不能放在异步操作（如 setTimeout 或 API 调用）之后——默认行为早已执行完毕。
为什么点了按钮没反应，控制台也没报错？
这种情况往往不是 JS 错误，而是表单控件“未通过验证”被浏览器静默拦截：
- 带
required的字段为空，或type="email"输入了非法格式，现代浏览器会聚焦该字段并显示气泡提示，但不会抛异常 -
<input type="submit">本身没有disabled，但父级<form>被设了disabled（无效，表单不支持该属性）——实际应禁用内部控件 - 按钮被 CSS 遮盖（如
z-index过低）或设置了pointer-events: none，导致点击根本没触发
真要调试，优先打开浏览器开发者工具的 Network 面板，看有没有发出请求；再切到 Elements 面板，确认按钮是否真的可交互、表单结构是否闭合、是否有隐藏的验证失败状态。
