提交按钮的type属性必须是submit，否则不会触发表单提交；禁用状态必须用disabled属性而非css；校验应优先使用html5原生属性，手动preventdefault()需谨慎；移动端需加touch-action: manipulation消除点击延迟。
提交按钮的 type 属性必须是 submit
很多表单按钮点击后没反应，根本原因是用了 button 或 type="button" —— 它们不会触发表单提交。只有 type="submit" 才会默认触发 form 的 submit 事件并提交数据。
常见错误场景：
- 复制了其他按钮代码，没改
type值 - 用
onclick手动调用form.submit()，绕过了原生验证和事件流 - 在 Vue/React 中绑定
@click却忘了event.preventDefault()，导致重复提交
正确写法示例：
禁用状态要靠 disabled 属性，而非 CSS
用户点击后立刻禁用按钮，防止重复提交，这是刚需。但只加 opacity: 0.5 或 pointer-events: none 是无效的 —— 按钮仍可被聚焦、仍可被键盘回车触发。
必须用原生 disabled 属性：
- 它会自动阻止所有交互（鼠标、键盘、屏幕阅读器）
- 表单提交时，
disabled元素的值不会被序列化发送 - 配合 JS 使用时，记得在请求完成后再移除：
btn.disabled = false
反例（危险）：
<button style="opacity: 0.4; pointer-events: none">提交</button>
正例（安全）：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<button type="submit" disabled>提交中…</button>
提交前校验失败时，preventDefault() 要谨慎使用
如果在 submit 事件里手动校验失败并调用 event.preventDefault()，浏览器就不会跳转或提交，这是对的。但要注意：
- HTML5 原生校验（如
required、pattern）会自动阻止提交，无需额外拦截 - 手动校验后调用
preventDefault()，必须同步给出反馈（比如 focus 到第一个错误字段），否则用户不知道哪里错了 - 不要混用原生校验和手动
preventDefault()后又调用form.submit()—— 这会绕过原生验证
推荐模式：优先用原生属性，复杂逻辑再加 JS 校验：
form.addEventListener('submit', e => {
if (!customCheck()) {
e.preventDefault();
showError('用户名格式不正确');
}
});
移动端点击无反馈？补上 touch-action: manipulation
在 iOS Safari 和部分安卓浏览器中，按钮点击可能有 300ms 延迟，或点击态（:active）不生效。这不是 JS 问题，而是浏览器为了双击缩放做的延迟处理。
解决方式很简单，加一行 CSS：
button[type="submit"] {
touch-action: manipulation;
}
这行声明告诉浏览器：“这个元素只用于单点操作，不需要等双击”。效果包括：
- 移除点击延迟
- 确保
:active样式能即时响应 - 不影响滚动和缩放等其他手势
注意：不要给整个 body 加，只作用于明确的交互控件。
真正容易被忽略的，是禁用态和校验逻辑的组合 —— 比如按钮已 disabled，但用户刷新页面后，JS 还没加载完，按钮又变可点了。这类边界情况，得靠服务端兜底 + 前端防御性判断，不能只信 UI 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
