Bootstrap 5 可构建语义清晰、响应式任务分配表单：用 form-control 配合 label[for] 和唯一 id；用 col-md-6 col-lg-4 控制宽度；select.form-select 含 disabled selected 空选项；多角色用 form-check，提交数组；JS 校验必填与有效性，并服务端兜底。
用 Bootstrap 5 渲染带角色选择的任务分配表单
Bootstrap 本身不提供“任务分配”专用组件，但能快速搭出语义清晰、响应式、可交互的表单结构。关键不是套模板，而是把 form、select、input 和 Bootstrap 的栅格与表单类合理组合。
常见错误是直接堆 form-control 却忽略标签关联、缺少必填标识、或在移动端漏掉 col-* 断点导致布局错乱。
- 始终为每个
input/select配label[for]，且id值唯一（例如id="assignee"对应label[for="assignee"]） - 用
col-md-6 col-lg-4控制字段宽度，避免在小屏上横向溢出 - 角色下拉建议用
select.form-select，而非自定义组件——它原生支持键盘导航和屏幕阅读器 - 任务描述用
textarea.form-control，加rows="3"防止默认过矮
给分配人下拉框添加动态选项（含空值占位）
静态写死 option 很容易，但实际中常需从后端加载或根据项目类型过滤角色。此时必须保留一个明确的空选项作为初始状态，否则用户可能误提交未选值。
错误做法：<option value="">请选择</option> 没有 disabled selected，会导致表单重置时无法回退到“未选”态。
- 正确写法：
<option value="" disabled selected>-- 分配给 --</option> - 若用 JS 动态填充，确保首次渲染后调用
select.dispatchEvent(new Event('change'))触发校验逻辑 - 后端返回角色列表时，务必检查
value字段是否为字符串（如"dev"），而非对象或数字，否则select.value可能取不到
用 form-check 实现多角色复选 + 权限提示
当任务允许多人协同（比如“需开发+测试共同确认”），就不能只用单选 select。改用 form-check 组合更可控，且能附加权限说明。
注意：多个同名 checkbox 提交后，后端接收的是数组（如 roles[]=dev&roles[]=qa），不是逗号分隔字符串。
- 每个
input[type="checkbox"]必须有独立id，对应label[for]，不能共用 - 用
form-check-inline在宽屏并排，小屏自动换行；避免硬写float-left等过时类 - 权限说明文字建议放
small.text-muted在label内，而不是额外div，防止焦点顺序错乱 - 禁用某角色时，同时加
disabled和title="当前项目不启用该角色"
提交前校验：必填字段 + 角色有效性
Bootstrap 的 required 属性只触发浏览器默认提示，体验割裂。真正要拦住无效提交，得结合 JS 判断 select.value 是否为空字符串或 undefined，以及复选框是否有至少一个被勾选。
容易忽略的点：用户可能手动修改 HTML，把 disabled 的 checkbox 改成 enabled 再勾选——服务端必须二次校验角色白名单，不能只信前端值。
- 校验函数里别只写
if (!select.value)，要写if (!select.value || select.value === '')，兼容不同浏览器返回值 - 对复选框组，用
[...document.querySelectorAll('input[name="roles"]:checked')].length === 0判断是否全未选 - 校验失败时，用
classList.add('is-invalid')给对应form-control加红框，并插入<div class="invalid-feedback">请至少选择一个角色</div>
表单看似简单，但角色权限边界、空值语义、移动端焦点管理这些细节，一不留神就让分配逻辑出错。别依赖 CSS 类撑起业务规则，JS 校验和服务端兜底才是关键。
