HTML表单字段通过data-key属性与配置对象字段一一映射，需配合input事件监听和显式DOM写回实现双向同步；data-*值均为字符串，类型转换需手动处理，布尔态应使用hasAttribute判断。
直接用 <form> + data-* + 原生表单控件就能搭出可用的属性配置面板，不需要框架、不依赖构建工具，关键在于属性怎么写、怎么读、怎么同步。
怎么让 HTML 表单字段对应真实配置项
每个 <input>、<select> 或 <textarea> 必须带 data-key，这是它和配置对象字段的唯一映射。浏览器不会自动帮你关联，全靠这个属性驱动后续逻辑。
-
data-key值必须是合法 JS 标识符（比如"api_timeout"可以，"timeout(ms)"不行） - 不要用
name替代data-key——name在表单提交时参与序列化，但可能含特殊字符或重复，不可靠 - 初始值优先从
data-default读，而不是靠value属性，避免 DOM 渲染后 JS 读不到“预设值” - 对
<select>，每个<option>要用data-value存真实配置值，而不是靠option.textContent
为什么 dataset 读出来的值总是字符串
dataset 是浏览器强制转成字符串的，哪怕你写了 data-min="100"，el.dataset.min 拿到的也是 "100"，不是数字。这不是 bug，是规范行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有
data-*值都按字符串处理，包括true、false、null、123 - 需要类型转换时，自己调
parseInt(el.dataset.min)或JSON.parse(el.dataset.config) - 布尔型配置别存
data-enabled="true"，直接用el.hasAttribute('data-enabled')判断是否存在更稳妥 - 如果要存对象，别塞 JSON 字符串进
data-config，改用<script type="application/json" id="config-data">{...}</script>
怎么避免表单控件和配置状态不同步
用户手动改了输入框，但 JS 没监听变化，或者 JS 更新了配置，但没反向刷新 UI，这是最常被忽略的断裂点。
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件（不是change）—— 实时响应文本、数字、复选框、单选框的所有变更 - 更新配置对象后，必须显式写回 DOM：
el.value = config[key]，不能只改 JS 对象 - 对
<select>，要设el.value；对<input type="checkbox">，要设el.checked = config[key] - 禁用状态用
disabled属性控制，别只靠 CSS 加opacity: 0.5—— 那样用户还能点、还能提交
真正难的不是画出面板，而是让每一个 data-key 都有明确的类型契约、每一个变更都有双向同步路径、每一个布尔态都用原生属性而非 class 模拟。这些细节漏掉一个，配置就可能存错、读错、表现错。
