Bootstrap表单需按语义分层：外层form设data-config-scope，每字段用div.mb-3包裹label与控件，差异化控件加data-type；统一用name作键名，开关/下拉/JSON等按类型取值并校验；提交前用FormData起点+dataset.type分支序列化为标准配置对象。
Bootstrap 表单结构怎么搭才支持动态参数配置
直接用 form + row/col 套壳不行——参数类型多（开关、下拉、数字范围、JSON 文本域），必须按字段语义分层组织，否则后期加校验或联动会崩。
推荐结构：外层 form 设 data-config-scope="api" 这类自定义属性标记作用域；每个参数项用 div class="mb-3" 包裹，内部用 label + 对应控件；类型差异大的字段（比如 textarea 和 switch）单独加 data-type 属性，方便 JS 统一读取渲染逻辑。
- 避免把所有
input都写成type="text"再靠 JS 改，Bootstrap 5 的form-check（开关）、form-select（下拉）有原生样式和 focus 状态，直接用更稳 -
form-control必须配id，且和label[for]严格对应，否则屏幕阅读器和点击 label 聚焦会失效 - JSON 类型字段建议用
textarea+class="form-control font-monospace"，加rows="4"，别用input type="text"——换行和缩进会丢
怎么让下拉选项和开关状态真正绑定参数值
Bootstrap 本身不处理数据绑定，得靠 HTML 属性 + 少量 JS 衔接。关键不是“怎么显示”，而是“提交时怎么取值”。
所有控件统一用 name 属性作为参数键名（如 name="timeout"），值由控件自身决定：select 取 value，checkbox 或 switch 用 checked 状态转布尔，range 输入框取 valueAsNumber。
- 开关别只用
form-check-input，要套在form-check容器里，并加data-boolean-value="true"和data-false-value="false"，避免 JS 里硬编码判断逻辑 - 下拉多选（
select[multiple]）的值是数组，提交前需Array.from(select.selectedOptions).map(o => o.value)，不能直接取value - 禁用字段（
disabled）的值默认不提交，如需保留，改用readonly+hidden配合隐藏域同步值
JSON 字段怎么校验格式又不卡 UI
用户粘贴 JSON 后立刻标红或弹窗会打断操作流。应该延迟校验：失焦（blur）+ 每次输入后防抖 300ms，只对非空内容做 JSON.parse() 尝试。
校验失败时，在 textarea 下方加 textarea 加 is-invalid 类——Bootstrap 5 会自动变红边框并显示提示。
- 别在
input事件里直接JSON.parse()，高频输入会卡顿；用setTimeout清除上一次定时器再设新定时器 - 错误位置定位难？用
try { JSON.parse(v) } catch (e) { e.message.match(/position (\d+)/)?.[1] }提取错误字符位置，高亮对应行（需按换行切分） - 生产环境慎用
eval或Function解析 JSON，哪怕加了try/catch也不安全
提交前怎么把表单转成标准配置对象
不要手写 document.querySelectorAll('input, select, textarea') 遍历——容易漏掉 disabled、hidden 或自定义组件。用 new FormData(formEl) 是最可靠起点。
但 FormData 只返回字符串值，需按字段类型二次转换：timeout 要转数字，enabled 开关要转布尔，headers JSON 字段要 JSON.parse()。建议封装一个 serializeConfig(formEl) 函数，内部查 formEl.elements 每个元素的 dataset.type 做分支处理。
-
FormData不包含未选中的radio和checkbox，所以开关类字段必须保证“关闭”也有明确值（比如value="false"），不能只靠是否存在来判断 - 数字字段用
parseInt(input.value, 10)，别用Number()——后者对空字符串返回0，易埋坑 - 如果表单里混了富文本编辑器（如 Quill），它的内容不在
FormData里，得手动取editor.root.innerHTML并塞进结果对象
复杂点在于嵌套结构（比如 “重试策略” 下有次数、间隔、退避因子三个字段），这时候光靠 name="retry.count" 不够，得用 name="retry[count]" 或解析 name 字符串做路径分割——稍不注意就拼错 key。
