表单提交按钮点击后应立即禁用并替换文字为“提交中…”或添加加载图标，防止重复提交；需通过javascript阻止默认行为、发起异步请求，并在完成后恢复按钮状态。
表单提交按钮在点击后显示加载状态，核心是“禁用按钮 + 替换文字/添加加载图标”，同时防止重复提交。关键不在 HTML 本身，而在配合 JavaScript 控制按钮状态。
禁用按钮并修改文字
用户点击后立即禁用按钮、改变文字，是最简单直接的方式：
- 用 disabled 属性阻止再次点击
- 把按钮文字（如“提交”）临时改为“提交中…”或“正在处理”
- 请求完成（无论成功或失败）后恢复按钮状态和文字
示例代码：
<script><br> document.getElementById('myForm').addEventListener('submit', function(e) {<br> const btn = e.target.querySelector('button[type="submit"]');<br> btn.disabled = true;<br> btn.textContent = '提交中...';<br><br> // 模拟异步提交<br> fetch('/api/submit', {<br> method: 'POST',<br> body: new FormData(e.target)<br> })<br> .then(() => alert('提交成功'))<br> .catch(() => alert('提交失败'))<br> .finally(() => {<br> btn.disabled = false;<br> btn.textContent = '提交';<br> });<br> });<br> </script>
添加 SVG 或 CSS 加载图标
纯文字不够直观，可内联一个简易旋转图标提升体验：
- 初始按钮里嵌入一个隐藏的 或 SVG
- 提交时显示图标、隐藏文字；完成后反之
- 用 CSS 实现旋转动画（例如 animation: spin 1s linear infinite）
小技巧：图标 SVG 可以直接写在 HTML 中，避免额外请求。
避免仅靠 CSS :disabled 样式变化
仅设置 button:disabled { opacity: 0.6; } 不够 —— 用户可能误以为卡住而狂点。必须配合 JS 禁用 + 明确反馈（文字/图标），否则体验断裂。
注意表单默认行为与防重复提交
如果没阻止表单默认提交（e.preventDefault()），页面会跳转或刷新，JS 状态控制就失效了。务必在监听 submit 事件时调用 e.preventDefault()，再手动发起 fetch / axios 请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
