HTML表单提交按钮必须置于form标签内且form需有method和action属性，否则无法正常提交；应使用原生type="submit"而非onclick调submit()，并注意无障碍与移动端适配。
HTML 表单提交按钮不需要 JavaScript 就能工作，但多数人加错位置或漏掉关键属性，导致点击没反应、表单不提交、甚至页面刷新异常。
button type="submit" 必须放在 form 标签内部
浏览器只认 <form> 内部的 type="submit" 按钮为表单提交触发器。放外面就只是个普通按钮，点它不会触发表单提交逻辑。
- ✅ 正确：
<form>...<button type="submit">提交</button></form> - ❌ 错误：
<form>...</form><button type="submit">提交</button> - ⚠️ 注意：
<input type="submit">同样必须在<form>内，否则无效
form 的 method 和 action 属性决定提交行为
没有 method 或 action，按钮能点，但浏览器不知道往哪发、用什么方式发——结果常是当前页重新加载（GET 空请求），看起来像“没反应”。
-
method常用值："get"（参数拼 URL，适合搜索）或"post"（发正文，适合含敏感/大量数据） -
action必须是有效路径，比如"/api/login"；留空或写错（如"api/login"缺少开头斜杠）会导致 404 或提交到错误地址 - 开发时可先设
action="#"测试按钮是否触发，但上线前必须改掉，否则会跳顶
避免用 onclick 调 submit() 方法替代原生提交
有人习惯写 <button onclick="document.getElementById('myForm').submit()">，这绕过了表单验证、禁用了回车提交、且可能跳过 submit 事件监听器。
立即学习“前端免费学习笔记（深入）”；
- 原生
type="submit"自动触发submit事件，event.preventDefault()可控拦截 - 手动调
submit()不触发该事件，form.addEventListener('submit', ...)完全收不到 - 如果真要 JS 控制，应在
submit事件里处理，而不是废掉原生机制
移动端和无障碍容易忽略的细节
按钮不可见焦点、没文字标签、或用了纯图标，会让键盘用户和读屏软件无法识别其功能。
- 别只靠 CSS 隐藏文字，用
aria-label明确说明用途：<button type="submit" aria-label="提交登录表单"></button> - 确保有足够对比度（文本色与背景色比 ≥ 4.5:1），不然 iOS Safari 会自动加灰背景干扰样式
- 避免给按钮设
width: 100%却没给父<form>设display: block，否则在 Android Chrome 上可能换行错位
最常出问题的不是按钮本身，而是它和 <form> 的嵌套关系、以及 action 指向的后端接口是否真实可接收。调试时先确认 Network 面板里有没有发出请求，再看是没发、发错地址、还是被 CORS 拦了——别一上来就怀疑按钮代码。
