<input type="submit">本身不发送数据，只触发表单提交；真正发送数据的是其所在的<form>元素，且表单须有action、method属性，字段须有name属性，否则数据无法提交。
submit 类型的 <input> 本身不发送数据，只触发表单提交
很多人误以为 <input type="submit"> 自带提交逻辑，其实它只是个“触发按钮”——真正发送数据的是它所在的 <form> 元素。如果没包在 <form> 里，点它完全没反应。
常见错误现象：Uncaught TypeError: Cannot read property 'submit' of null（试图用 JS 调用 submit 方法但找不到 form），或点击后页面刷新但后端收不到字段（form 缺少 action 或字段没 name）。
-
<input type="submit">必须嵌套在<form>标签内才有效 - 表单中所有需提交的字段（如
<input>、<select>、<textarea>）必须有name属性，否则不会被序列化发送 -
form标签需明确指定action（目标 URL）和method（GET或POST），否则默认为当前页面 GET 提交
name 属性缺失是 80% 的“数据没传过去”原因
浏览器只把带 name 的控件值加入提交载荷，id 或 class 不起作用。比如 <input id="email"> 不会发任何值；而 <input name="email"> 才会以 email=xxx 形式提交。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
id代替name（尤其在 JS 操作后忘记补name） - 动态生成的 input 忘记设
name（例如用document.createElement('input')后只设了id） - 禁用字段（
disabled）的值不会提交，要用readonly替代
submit 按钮的 value 决定按钮显示文字，不影响提交内容
<input type="submit" value="登录"> 中的 value 只控制按钮上显示什么字，和提交数据无关。它不会作为字段发给后端，除非你额外加一个同名 name="value" 的隐藏域。
如果想让按钮行为更可控（比如防重复提交、校验前置），推荐用 event.preventDefault() 阻止默认提交，再手动收集数据：
<form id="myForm">
<input name="username">
<input type="submit" value="提交">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止原生提交
const data = new FormData(this);
fetch('/api/login', { method: 'POST', body: data });
});
</script>
GET 和 POST 提交对 URL 和数据长度的实际影响
method="GET" 会把所有字段拼进 URL 查询字符串（?a=1&b=2），受浏览器和服务器 URL 长度限制（通常 2048 字符左右）；method="POST" 把数据放请求体，适合传大量文本或文件。
注意兼容性细节：
- 没有显式写
method时，默认是GET - 用
POST时，服务端需正确解析application/x-www-form-urlencoded（默认格式）或multipart/form-data（含文件时） - 纯前端调试可用
console.log(new URLSearchParams(new FormData(form)).toString())看实际提交串
最常被忽略的是：表单提交是否经过了代理、CSP 策略拦截，或者后端路由没匹配到 action 指定的路径——这时候浏览器看似刷新了，但请求根本没发出。
