Bootstrap 5 设备维修表单应采用语义化结构：顶层用，每组字段用响应式分栏，必填项配for/id关联的，禁用placeholder替代标签；设备类型等用form-select，文本类用form-control并加aria-describedby，长描述用，开关类用form-check，校验失败时用紧邻的invalid-feedback配合is-invalid类与setCustomValidity()控制状态。

Bootstrap 本身不提供“设备维修表单”这个现成组件，它只提供响应式布局、表单控件样式和交互辅助类；你要做的，是用它的 form 结构 + 语义化类 + 少量自定义逻辑，快速搭出一个在手机、平板、桌面都可用的维修登记表单。

怎么组织表单结构才符合 Bootstrap 5 语义规范

Bootstrap 5 强调语义化和无障碍支持，form 必须包裹 fieldset 或直接使用 div 做分组，每个输入项需有明确的 label（不能靠 placeholder 替代）。常见错误是把所有字段堆在一层 div 里，导致小屏下错位或读屏器无法识别。

• 用
  作为顶层容器，g-3 提供列间间距，比手动加 mb-3 更可靠
• 每组字段（如“设备型号 + 序列号”）用
  包裹，md 断点确保平板横屏两列、手机竖屏单列
• label 必须带 for 属性，且值与对应 input 的 id 严格一致，否则点击标签无法聚焦输入框
• 避免用 placeholder 当标签用——它会在输入时消失，对屏幕阅读器和低视力用户不友好

哪些字段类型该用 Bootstrap 的 form-select、form-control 还是 form-check

设备维修表单常见字段类型差异大，选错控件不仅影响体验，还会破坏表单验证逻辑。比如把“故障现象”写成单行 input，用户填长描述就直接被截断。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 设备类型、报修部门、优先级：用 ，Bootstrap 会自动适配移动端原生选择器，比自定义下拉更稳定
• 设备编号、用户姓名、联系电话：用 ，注意加 aria-describedby 关联帮助文本（如“请输入12位内部编号”）
• 故障现象、维修记录：必须用 ，并设 rows="4"，否则默认高度太小，iOS Safari 下还可能触发缩放
• 是否紧急、是否已备份数据：用
  包裹 input type="checkbox"，不要用 switch 类——它只是视觉切换，没有语义，不利于自动化测试

  提交前校验失败时，Bootstrap 怎么显示错误但不打断操作流

  原生 HTML5 表单验证（required、pattern）配合 Bootstrap 的 is-invalid 类能自动高亮，但容易忽略两点：一是错误提示文案没绑定到具体字段，二是移动端键盘弹出后焦点被遮挡。

  • 给每个必填 input 加 required 和 aria-invalid="false"，JS 提交时用 setCustomValidity() 控制状态，再手动切 is-invalid 类
  • 错误提示用
    紧跟在对应输入框之后，不能放在别处——否则 form-control 的边框变红但用户看不到提示在哪
  • 提交失败后，用 element.focus() 聚焦第一个无效字段，但 iOS 上要加 setTimeout 延迟 300ms，否则键盘还没完全弹起就 focus，会触发页面滚动异常
  • 别依赖 :invalid CSS 伪类做校验——它只响应原生属性，对 JS 动态设置的值无效

  真正难的不是把字段排整齐，而是让“设备编号校验规则”“图片上传限制”“多级部门联动选择”这些业务逻辑，和 Bootstrap 的样式层干净解耦。样式可以重置，但校验逻辑一旦混进 HTML 属性里，后期改正则或加审计日志就会卡住。