Bootstrap 5 表单应直接用 form 包裹、row+col 布局，避免误加 container；优先使用 form-floating（label 在 input 后）配合 required 和语义化 type（tel/email）；file input 需 accept 属性和 form-text 提示；提交按钮须手动控制 disabled 状态并处理 fetch 结果；移动端需设 textarea rows、优化 select、禁用 autocomplete 并处理 iOS 拍照 fallback。
Bootstrap 5 表单结构怎么搭才不踩坑
直接用 form 包裹、row + col 布局就行，但别一上来就套 container —— 店铺申请表单常嵌在弹窗或独立页中，加了 container 反而左右留白过大。优先用 form-floating 配合 input，避免 label 覆盖 placeholder 导致移动端点选失焦。
常见错误：把 form-control 直接塞进 col 里却不加 mb-3，结果所有控件紧贴在一起，提交按钮被挤到看不见。
-
form-floating必须包裹input和label，且label放在input后面，否则浮动 label 不显示 - 店铺名称、营业执照号这类必填字段，加上
required属性，Bootstrap 5 会自动触发原生校验（不用额外 JS） - 手机号用
type="tel"，iOS 键盘会自动切出数字键盘；邮箱必须用type="email"，否则:valid样式不生效
上传营业执照图片的 file input 怎么样式统一
原生 input type="file" 在各浏览器长得完全不同，Bootstrap 5 没提供开箱即用的美化方案。别用 CSS 强行覆盖 input 的 opacity: 0 + 伪元素——iOS Safari 会拒绝触发点击事件。
正确做法是用 form-control 配合自定义 label，并监听 change 事件更新显示文件名：
<div class="mb-3"> <label for="licenseFile" class="form-label">营业执照（JPG/PNG，≤5MB）</label> <input class="form-control" type="file" id="licenseFile" accept=".jpg,.jpeg,.png" required><div class="form-text">请确保执照在有效期内</div> </div>
- 务必加
accept=".jpg,.jpeg,.png"，否则用户可能误传 PDF，后端解析失败 - 不要用
display: none隐藏原生 input，而是用opacity: 0+position: absolute覆盖在自定义按钮上（需额外 JS 绑定 click） - 服务端必须二次校验文件类型和大小，前端限制可被绕过
提交按钮禁用与状态反馈怎么做才可靠
用户点一次就发两次请求？大概率是没禁用按钮，也没处理 Promise 状态。Bootstrap 本身不管理按钮 loading 状态，得自己加逻辑。
- 表单提交时立刻执行
button.disabled = true，并改文字为"提交中..."，防止重复点击 - 用
fetch()发送数据后，无论成功失败，都得恢复按钮状态：button.disabled = false，否则用户卡死 - 后端返回 400（如执照号格式错误），要把错误信息插入对应
.invalid-feedback元素，而不是只靠 alert 提示 - 别用
submit事件的event.preventDefault()就完事——要检查form.checkValidity()，否则原生校验提示不显示
移动端适配容易被忽略的三个细节
店铺申请人很多用手机拍照上传、手写填写，稍不注意就会导致体验断裂。
-
textarea必须加rows="3"，否则 iOS 上高度塌缩成一行，用户看不到输入内容 - 地址选择用
select时，选项超过 5 个就换城市级联组件（如china-areas），别堆几十个option—— 微信内置浏览器会卡顿 - 所有
input加autocomplete="off"，尤其营业执照号这种敏感字段，防止浏览器填错历史值
最麻烦的是「拍照上传」场景：iOS 微信里 input type="file" capture="environment" 有时不唤起后置摄像头，得 fallback 到手动选择；这个逻辑没法靠 Bootstrap 解决，得单独判断 UA + 注入 JS 重试机制。
