按钮type必须设为submit才能触发表单提交，否则点击无效；表单需明确设置action和method（小写），拦截提交须在submit事件中调用preventDefault()；多按钮应共用name、不同value以区分操作意图。
按钮类型必须设为 submit
表单提交行为由按钮的 type 属性决定，不是靠 onclick 或 JS 绑定事件触发。如果写成 type="button" 或直接省略（浏览器默认为 button），点击后不会触发表单提交。
常见错误是复制了带 JS 的按钮模板，却忘了改回 submit：
<button type="button">提交</button> <!-- 不会提交 --> <button type="submit">提交</button> <!-- 正确 -->
-
<input type="submit">和<button type="submit">效果等价，后者更易嵌套图标或富文本 - 若用
<button>但没写type，不同浏览器可能有兼容差异，务必显式声明 - 禁用状态要写
disabled，而不是靠 JS 移除事件监听——否则用户仍可按回车提交
表单必须有 action 和 method
没有 action 的表单，提交时会向当前 URL 发起请求；没有 method 则默认用 GET。这容易导致参数拼在 URL 上、中文乱码、或后端收不到数据。
典型问题：调试时看到 URL 变长、出现问号和参数，说明用了 GET 但本意是 POST：
立即学习“前端免费学习笔记（深入）”；
<form action="/login" method="POST"> <input name="username"> <button type="submit">登录</button> </form>
-
method值必须全小写："get"或"post"，大写如"POST"在部分旧浏览器中可能被忽略 -
action为空字符串或"#"会导致页面刷新或跳转失败，应明确指向接口路径 - 如果用前端框架（如 React）接管提交，也要保留
method和action，否则原生提交逻辑仍可能意外触发
阻止默认提交需用 event.preventDefault()
想用 JS 拦截提交并做校验或发 Ajax，必须在 submit 事件里调用 preventDefault()。只写 return false 或在 click 事件里阻止，是无效的。
错误示范：
form.addEventListener('click', e => {
e.preventDefault(); // ❌ 点击按钮不等于表单提交，回车仍会提交
});正确写法：
form.addEventListener('submit', e => {
e.preventDefault(); // ✅ 拦截所有提交方式（按钮点击、回车、JS submit()）
// 这里发 fetch 或校验逻辑
});- 不要在
button的onclick里阻止，因为用户可能按回车提交表单 - 如果校验失败，仅调用
preventDefault()即可，不用手动return或抛错 - 调用
form.submit()是绕过事件监听的“硬提交”，此时submit事件监听器不会触发
多个提交按钮时用 name 和 value 区分意图
一个表单里放“保存”“删除”“预览”多个按钮，后端需要知道用户点了哪一个。不能只靠 JS 添加隐藏字段，而应利用原生机制：给每个 button 设置相同的 name、不同的 value。
这样提交后，后端收到的就是带语义的键值对，比如 action=save 或 action=delete：
<button type="submit" name="action" value="save">保存</button> <button type="submit" name="action" value="delete">删除</button>
- 只有被点击的按钮，其
name/value才会随表单一起发送；未点击的不会传 - 避免用
id或class区分——这些不会出现在提交数据里 - 如果按钮内容含空格或特殊字符，
value应保持简洁、无空格、ASCII 安全，便于后端解析
表单提交看着简单，但实际出问题往往卡在 type 写错、preventDefault 没写对、或者多个按钮共用 name 时 value 拼写不一致——这些地方一错，整个流程就静默失败，连 console 都不报错。
