Bootstrap不提供捐赠表单组件，需HTML语义化form+Bootstrap样式+后端逻辑协同实现；必须用form标签包裹所有字段，input/select设name属性，select用form-select、input用form-control，配合is-invalid实时校验，提交时禁用按钮防重复。

Bootstrap 本身不提供“捐赠表单”这种业务组件，它只提供表单控件的样式和布局工具；真正要实现物资捐赠功能，得靠 HTML 表单结构 + Bootstrap 类做样式 + 后端接收逻辑，三者缺一不可。

用 form 标签搭骨架，别直接套 card 就完事

很多人一上来就用 card 包一堆 input，结果提交失败或语义混乱。捐赠表单必须是语义化 form，且带 method 和 action（哪怕先指向 # 做前端验证）。

• form 标签必须包裹所有字段，包括 submit 按钮
• 每个 input/select 必须有 name 属性，后端靠它取值，比如 name="donor_name"、name="item_type"
• 物资类型适合用 select + option，别用一堆 radio 增加 DOM 体积
• 数量建议用 type="number" 并设 min="1"，避免提交 0 或负数

form-control 和 form-select 的实际用法差异

Bootstrap 5 起把表单控件类做了拆分：form-control 专用于 input、textarea；form-select 才用于 select。混用会导致边框错位或高度不一致。

VPS Bootstrap

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

下载

• <input class="form-control" name="contact"> —— 正确
• <select class="form-select" name="category"></select> —— 正确
• <input class="form-select"> —— 错误，下拉箭头不会显示
• 多行备注用 <textarea class="form-control"></textarea>，别漏掉 rows 属性，否则默认只有 2 行高

校验逻辑不能只靠 required，得配合 invalid 状态类

浏览器原生 required 只在提交时触发，用户体验差。Bootstrap 的 is-invalid 类需要手动控制，配合 JS 实时反馈。

• 给必填项加 required 是基础，但得监听 blur 或 input 事件来切换 is-invalid 类
• 错误提示用 <div class="invalid-feedback">，必须紧跟对应 <code>input 后面，否则不显示
• 物资数量字段如果允许“不限”，建议用 select 切换模式，而不是让 number 输入框接受空字符串（number 空值会变成 ""，后端难处理）
• 邮箱、电话字段建议用 type="email" / type="tel"，移动端会调起对应键盘，但别依赖它们做最终校验

提交前别忘了禁用按钮防重复点击

捐赠表单一旦提交成功，用户可能狂点按钮，导致后端收到多条重复记录。Bootstrap 没内置防重逻辑，得自己加。

• 点击 submit 后立即 button.disabled = true，并改文字为 "提交中..."
• 成功响应后恢复按钮，失败则弹出提示并保留表单数据（别清空）
• 后端也要做幂等性处理，比如用捐赠人手机号 + 时间戳生成唯一请求 ID
• 如果走 AJAX 提交，记得设置 Content-Type: application/x-www-form-urlencoded 或用 FormData 对象，否则 PHP/Node.js 可能收不到 name 字段

真正卡住人的地方往往不是 Bootstrap 类怎么写，而是表单字段命名是否对齐后端接口、提交方式（form action 还是 fetch）、以及空值/边界值（如数量为 0、备注为空）如何约定。这些细节不提前对齐，样式再漂亮也白搭。