表单必须用form包裹并遵循Bootstrap语义结构，字段用mb-3统一间距，label需for与id匹配，select用form-select，校验依赖HTML5属性（pattern、required、minlength等），提交按钮须type="submit"并防重复点击，响应式需真机测试，前后端字段格式须严格对齐。
表单结构要用 form 包裹，别直接堆 div
Bootstrap 表单样式依赖 form 元素及其子元素的语义结构。如果只用一堆 div 拼布局，.form-control、.form-label 这些类会失效，边框、间距、聚焦态全乱。必须从 <form></form> 开始，所有输入控件（input、select、textarea）都放在它里面。
常见错误：把 form 拆成多个小块，或者用 display: flex 强行对齐而不加 .row/.col 布局类——结果在小屏上字段重叠、标签错位。
- 姓名、工号、部门、申请理由这些字段，统一用
<div class="mb-3"> 包裹，保证垂直间距一致 <li>标签必须用 <code><label for="xxx"></label>，且for值与对应input的id严格匹配，否则点击标签无法聚焦输入框 - 门禁卡类型（如“单门禁”“全区域”）用
<select class="form-select"></select>，别用普通select，否则下拉箭头不显示 - 工号字段用
<input type="text" pattern="[A-Za-z0-9]{6,12}" title="工号为6–12位字母或数字">，pattern在提交时触发提示 - 手机号用
type="tel"，iOS 键盘会自动切数字键盘；搭配maxlength="11"防误输 - 申请理由用
<textarea required minlength="10"></textarea>，minlength确保不是只填“随便”两个字 - 所有必填字段都要加
required，否则用户点提交可能直接跳过校验 - 提交按钮必须写
<button type="submit" class="btn btn-primary"></button>，写成type="button"就不会触发表单默认提交 - JS 提交前加
btn.disabled = true，并改文字为“提交中…”，防止二次点击；成功后记得恢复，否则按钮永远灰掉 - 别用
<a class="btn"></a>代替按钮，链接没有form提交能力，也绕过所有原生校验 - 如果后端返回错误（比如工号已存在），要在
.invalid-feedback里显示具体提示，而不是只弹alert - 部门选择这类长文本字段，在小屏上容易撑破容器，建议加
text-truncate或限制max-width - 日期选择用
<input type="date">，iOS 和安卓原生组件体验比 JS 插件更稳定，但注意 Safari 旧版本不支持，得降级为type="text"+ 提示文案 - 测试时重点看：横向滚动是否出现、按钮是否被键盘顶起、
form-label是否换行压住输入框——这些在桌面端完全看不出
form-control 的 type 和 required 要按需设
门禁卡申请有强校验需求：工号必须是数字+字母组合、手机号要格式正确、申请理由不能空。Bootstrap 本身不校验逻辑，但能配合原生 HTML5 属性做基础拦截。
按钮和提交行为别忽略 disabled 和 type="submit"
表单提交后如果没及时反馈，用户可能连点多次，导致重复提交——门禁系统里重复发卡会出实际问题。Bootstrap 的按钮样式需要明确 type 属性才能正确绑定行为。
响应式断点要测真机，别只看桌面预览
门禁卡申请人常在手机上填表，但 Bootstrap 的 col-md-6 在某些安卓浏览器里会因缩放或 UA 识别不准而错行。光靠 Chrome DevTools 的模拟器不够。
门禁卡表单真正麻烦的不是样式，而是字段语义和后端约定必须严丝合缝：比如“生效时间”字段，前端传 "2024-05-20"，后端却要求 "20240520" 或带时区，这种细节不提前对齐，联调时就得来回改。
