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 里，导致小屏下错位或读屏器无法识别。
- 用
<form class="row g-3"></form>作为顶层容器，g-3提供列间间距，比手动加mb-3更可靠 - 每组字段（如“设备型号 + 序列号”）用
<div class="col-md-6"> 包裹，<code>md断点确保平板横屏两列、手机竖屏单列 -
label必须带for属性，且值与对应input的id严格一致，否则点击标签无法聚焦输入框 - 避免用
placeholder当标签用——它会在输入时消失，对屏幕阅读器和低视力用户不友好 - 设备类型、报修部门、优先级：用
<select class="form-select"></select>，Bootstrap 会自动适配移动端原生选择器，比自定义下拉更稳定 - 设备编号、用户姓名、联系电话：用
<input type="text" class="form-control">，注意加aria-describedby关联帮助文本（如“请输入12位内部编号”） - 故障现象、维修记录：必须用
<textarea class="form-control"></textarea>，并设rows="4"，否则默认高度太小，iOS Safari 下还可能触发缩放 - 是否紧急、是否已备份数据：用
<div class="form-check"> 包裹 <code>input type="checkbox"，不要用switch类——它只是视觉切换，没有语义，不利于自动化测试提交前校验失败时，Bootstrap 怎么显示错误但不打断操作流
原生 HTML5 表单验证（
required、pattern）配合 Bootstrap 的is-invalid类能自动高亮，但容易忽略两点：一是错误提示文案没绑定到具体字段，二是移动端键盘弹出后焦点被遮挡。- 给每个必填
input加required和aria-invalid="false"，JS 提交时用setCustomValidity()控制状态，再手动切is-invalid类 - 错误提示用
<div class="invalid-feedback"> 紧跟在对应输入框之后，不能放在别处——否则 <code>form-control的边框变红但用户看不到提示在哪 - 提交失败后，用
element.focus()聚焦第一个无效字段，但 iOS 上要加setTimeout延迟 300ms，否则键盘还没完全弹起就 focus，会触发页面滚动异常 - 别依赖
:invalidCSS 伪类做校验——它只响应原生属性，对 JS 动态设置的值无效
真正难的不是把字段排整齐，而是让“设备编号校验规则”“图片上传限制”“多级部门联动选择”这些业务逻辑，和 Bootstrap 的样式层干净解耦。样式可以重置，但校验逻辑一旦混进 HTML 属性里，后期改正则或加审计日志就会卡住。
- 给每个必填
哪些字段类型该用 Bootstrap 的 form-select、form-control 还是 form-check
设备维修表单常见字段类型差异大，选错控件不仅影响体验，还会破坏表单验证逻辑。比如把“故障现象”写成单行 input，用户填长描述就直接被截断。
