submit按钮必须置于form标签内才有效，否则点击无响应；需设置name属性才能向后端发送数据；应监听form的submit事件而非按钮click事件。
submit按钮必须放在form标签内才有效
单独写一个 <input type="submit">，页面上能显示按钮，但点击后什么都不会发生——浏览器根本不会触发提交行为。它必须是某个 <form></form> 元素的子节点，否则没有上下文可提交。
常见错误现象：Uncaught TypeError: form.submit is not a function（误以为 JS 调用 submit() 就行，其实 DOM 中没绑定表单也会报错）；或者点击无反应，控制台也无提示，本质就是脱离了 <form></form>。
- 正确结构：先写
<form action="/login" method="POST"></form>，再在其中放<input type="submit" value="登录"> - 可以嵌套在
<fieldset></fieldset>或<div> 里，只要父级最终能向上找到 <code><form></form> - 多个 submit 按钮可以共存于一个 form，点击哪个就提交哪个（但只有被点击的那个的
name和value会随请求发出） - 同一表单中多个 submit 可用相同
name、不同value区分操作意图，如name="cmd" value="publish"/value="draft" - 如果所有 submit 都没设
name，后端只能靠判断其他字段或 HTTP 方法来区分动作，容易出错 -
value支持 HTML 实体（如 - 禁用按钮请用
disabled属性（<input type="submit" disabled>），而不是仅靠 CSS 灰掉外观 - 自定义焦点样式务必保留
:focus或:focus-visible，否则键盘用户无法感知当前焦点 - 避免用
width: 100%+box-sizing: border-box组合在 flex 容器中导致按钮撑满并挤压其他控件 - 正确做法：
form.addEventListener('submit', e => { e.preventDefault(); /* 校验后手动 fetch */ }) - submit 事件在表单校验（
required、type="email"等）通过后才触发，天然支持原生约束 - 如果用了
e.preventDefault()，后续需手动收集数据并fetch，不能直接再调form.submit()（那会跳过 JS 逻辑）
submit按钮的name和value参数决定后端接收内容
很多开发者只设 value（按钮上显示的文字），却忽略 name。结果后端收不到这个字段——因为浏览器只把“有 name 属性且非空”的 submit 按钮的 name=value 对作为表单数据的一部分发送。
比如：<input type="submit" name="action" value="save"> 提交后，后端会收到 action=save；而 <input type="submit" value="delete">（缺 name）则完全不发任何键值对。
立即学习“前端免费学习笔记（深入）”；
用CSS控制submit按钮样式时注意默认行为干扰
submit 按钮自带浏览器默认样式（边框、背景、焦点环、鼠标按下效果），直接加 border: none 或 background: transparent 可能导致可访问性问题或点击反馈消失。
更关键的是：某些 CSS 属性会意外禁用交互，比如 pointer-events: none（常被误用于“禁用按钮”，但实际应改用 disabled 属性）；或父容器设置了 overflow: hidden 且按钮有 :focus-visible 伪类动画，可能切掉焦点框。
JavaScript监听submit事件比监听click更可靠
直接给 submit 按钮绑 click 事件，会漏掉回车提交、JS 主动调用 form.submit()、辅助设备触发等场景。真正要拦截或增强提交逻辑，必须监听 form 的 submit 事件。
典型错误：在按钮上写 onclick="return validate()"，但用户按 Enter 键仍会绕过校验直接提交。
表单提交的边界情况很多，比如按钮在 shadow DOM 里、动态插入的 submit、或被 contenteditable 干扰的父容器——这些时候连按钮是否被识别为“可提交元素”都成问题，得具体看渲染上下文。
