表单必须用form包裹且添加role="form"以保障可访问性；需使用form-select替代form-control处理下拉框；datetime-local输入须严格匹配YYYY-MM-DDTHH:MM格式；提交按钮状态须用JS动态控制并配合invalid-feedback展示冲突校验结果。
表单结构必须用 form 包裹，且 role="form" 不能少
Bootstrap 的表单样式依赖于语义化结构和特定 class，光加 form-control 不够。没写 <form></form> 标签或漏掉 role="form"（在 Bootstrap 4/5 中虽非强制但影响可访问性），会导致部分辅助工具识别失败，移动端键盘弹出异常。会议室预定这类高频操作，用户常在手机上快速填写，可访问性差会直接卡住流程。
实操建议：
- 始终用
<form class="needs-validation" novalidate></form>开头，启用原生 HTML5 表单验证反馈 - 每个输入控件外层套
<div class="mb-3">，避免垂直间距塌陷 <li> <code>required属性必须加在input或select上，Bootstrap 不自动补全校验逻辑 - 日期和时间字段优先用
type="datetime-local"，而非插件——现代浏览器支持良好，且无需额外 JS 初始化 - 后端返回 ISO 时间串时，前端用
dateStr.replace(/:\d\d\.\d+Z$/, "")去掉秒和毫秒，再确保是本地时区（或统一转为 UTC 后截取） - 初始化默认值推荐：
<input type="datetime-local" value="2024-05-20T14:30">，手动写死或用 JS 拼接 - 不要依赖
new Date().toJSON()，它带Z，datetime-local会静默忽略 - 如果需要兼容 Safari（不支持
datetime-local），用两个分离的date+time输入框，后端合并处理 - 所有
select必须加class="form-select"，并包裹在<div class="mb-3"> 内 <li>首项用 <code><option value="" disabled selected>选择会议室</option>，配合required实现必选校验 - 如果会议室数据来自 API，JS 动态插入
option后，记得触发form-select的重绘（通常不用，但若用了第三方增强库如 Choices.js，就得手动刷新） - 避免给
select设固定width，让其自然撑开，否则在小屏上会横向溢出 - 初始状态保持按钮可用，用 JS 绑定
submit事件，在fetch或axios发起前设btn.disabled = true，成功/失败后恢复 - 按钮文案动态改成
"提交中..."，比单纯禁用更明确，防止用户误以为卡死而刷新页面 - 务必在
finally块里恢复按钮状态，否则网络错误后按钮永远不可点 - 不要只靠 CSS 隐藏按钮或改透明度，屏幕阅读器仍可能读出，应真实操作
disabled属性
datetime-local 的 value 格式必须是 YYYY-MM-DDTHH:MM
很多人把 new Date().toISOString().slice(0, 16) 直接塞进 value，结果在 Chrome 显示为空白或报错。因为 datetime-local 要求严格匹配格式，且不接受带秒或时区的字符串（比如 "2024-05-20T14:30:00Z" 就会失效）。
实操建议：
会议室下拉选单要用 <select class="form-select"></select>，别手写 form-control
Bootstrap 5 把下拉框的 class 从 form-control 升级为 form-select，继续用旧 class 会导致箭头图标错位、高度不一致，尤其在 iOS Safari 中选项弹出层偏移严重。
实操建议：
提交按钮禁用状态要靠 JS 控制，disabled 属性不是万能的
用户点一次“预定”后，如果后端响应慢，按钮没立刻置灰，可能造成重复提交。单纯在 HTML 里写 <button disabled></button> 是静态的，无法响应异步流程。
实操建议：
最易被忽略的是：会议室预定表单往往要校验「时间是否与其他预定冲突」，这个逻辑无法用 HTML5 属性完成，必须在提交前调用接口做实时检查，并把错误信息用 <div class="invalid-feedback"> 插入对应字段下方——否则用户只看到“预定失败”，却不知道是时间撞了还是网络错了。</div>
