Bootstrap 5+ 表单需用 .form-floating 包裹 input 和 label，且 id 与 for 必须严格对应；amount 输入框应使用 type="text" + inputmode="decimal" + 实时过滤非法字符；银行下拉框须用原生 form-select 保障移动端兼容性；提交按钮需禁用+文字变更+finally 恢复+防抖。
表单结构必须用 .form-floating 或 .form-control 配合 label，否则 Bootstrap 5+ 的样式会失效
Bootstrap 5 移除了对 placeholder 作为 label 的支持，直接写 <input placeholder="收款人账号"> 不会显示浮动标签。必须显式包裹 label，且 for 和 id 要严格对应：
<div class="form-floating mb-3"> <input type="text" class="form-control" id="recipientAccount" name="recipient_account"> <label for="recipientAccount">收款人账号</label> </div>
漏掉 id、拼错 for 值、或把 label 放在 input 外层但没加 form-floating 类，都会导致标签不浮动、文字重叠或点击失焦。
amount 输入框必须限制为数字 + 小数点，且需防用户粘贴非法字符
转账金额不能只靠 type="number" —— 它允许输入 e、-、+，还可能触发浏览器默认的上下箭头（误操作风险高）。更稳妥的做法是：
- 用
type="text"+inputmode="decimal"+pattern="\d*\.?\d*"组合 - 绑定
input事件，实时过滤非数字和多余小数点：document.getElementById('amount').addEventListener('input', function(e) { let v = e.target.value.replace(/[^\d.]/g, ''); if (v.split('.').length > 2) v = v.replace(/\.+$/, ''); e.target.value = v; }); - 后端仍需二次校验，因为前端可被绕过
银行选择下拉框要兼容移动端原生唤起，别用第三方 Select 插件
很多项目为了“美观”引入 select2 或 choices.js，但在 iOS/Android 上会导致键盘无法弹出、焦点丢失、甚至页面卡死。Bootstrap 自带的 <select class="form-select"></select> 已足够：
- 保留原生
select行为，触控体验稳定 - 添加
aria-label提升可访问性：<select class="form-select" aria-label="选择开户银行"></select> - 若需搜索能力，应等用户提交后再用 AJAX 加载匹配银行列表，而非在表单内嵌复杂组件
强行覆盖原生 select 样式，大概率换来的是兼容性债和测试成本。
提交按钮禁用逻辑必须同时处理网络失败与重复点击
用户点一次就发两笔款，问题不在 UI，而在 JS 控制流没封住。正确做法是：
- 点击瞬间设
button.disabled = true并改文字为“提交中…” - 请求完成（无论成功或失败）后才恢复按钮：
button.disabled = false - 不要仅靠
fetch().then()恢复 —— 必须在finally块里执行 - 额外加一层防抖：记录上一次点击时间戳，间隔
转账类操作没有“优雅降级”的余地，按钮状态失控是最容易被忽略、却最危险的一环。
