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 的支持，直接写 不会显示浮动标签。必须显式包裹 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 自带的 已足够：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 保留原生 select 行为，触控体验稳定
• 添加 aria-label 提升可访问性：
• 若需搜索能力，应等用户提交后再用 AJAX 加载匹配银行列表，而非在表单内嵌复杂组件

强行覆盖原生 select 样式，大概率换来的是兼容性债和测试成本。

提交按钮禁用逻辑必须同时处理网络失败与重复点击

用户点一次就发两笔款，问题不在 UI，而在 JS 控制流没封住。正确做法是：

• 点击瞬间设 button.disabled = true 并改文字为“提交中…”
• 请求完成（无论成功或失败）后才恢复按钮：button.disabled = false
• 不要仅靠 fetch().then() 恢复 —— 必须在 finally 块里执行
• 额外加一层防抖：记录上一次点击时间戳，间隔

转账类操作没有“优雅降级”的余地，按钮状态失控是最容易被忽略、却最危险的一环。