data-*属性不是表单绑定位置，仅作静态元信息容器；实时状态必须通过value/checked等原生属性操作，否则会导致数据与视图脱节。
data- 属性本身不参与表单数据绑定——它只是个“口袋”，装数据可以，但不会自动同步到 value、checked 或提交内容里。真要绑定，得靠 JavaScript 主动读写原生属性。
为什么不能直接用 dataset 替代 value 绑定表单
常见错误是把 data-value="abc" 当成可编辑字段的值源，结果用户输完，JS 里读 el.dataset.value 还是初始值，完全没变。
-
data-属性只在初始化时写入一次，浏览器不会监听它的变化，也不会反向更新 DOM 状态 - 用户修改
<input>内容，dataset不会自动更新；你改了dataset，输入框也不会刷新显示 - 表单提交时，
data-值根本不会被包含进FormData或form.elements序列化结果中
什么时候该用 data-，什么时候必须用 value/checked
区分清楚用途，才能不混用：
- 存元信息用
data-：比如data-field-key="user_email"、data-required="true"、data-type="email"—— 这些是配置，不是状态 - 读写实时状态必须用原生属性：
input.value、checkbox.checked、select.value、textarea.value - 下拉选项需要额外数值？在
<option>上加data-points="5"，但选中逻辑仍靠select.value和select.options[select.selectedIndex].dataset.points
如何安全地把 data- 和表单状态桥接起来
典型场景：弹窗编辑、模板克隆、配置驱动表单。关键是在初始化和事件两个节点手动同步：
立即学习“前端免费学习笔记（深入）”；
- 回填时：先读
button.dataset.email，再赋给form.elements.email.value = value - 监听时：绑定
input事件（不是change），拿到e.target.value后，再按需写回对应 data 属性（如用于防抖标记：e.target.dataset.lastInput = Date.now()） - 提交前：别读
dataset，统一从form.elements.xxx.value取最新值；data-只负责传初始值或控制行为，不承载运行时状态 - 动态插入控件后，必须立刻绑定事件——
innerHTML =会清空所有监听器和当前value，光写data-没用
最容易被忽略的是：DOM 重写（比如 el.innerHTML = template）不仅丢事件，还清空用户刚输的内容，而 dataset 里的旧值还在，看起来“数据没丢”，其实视图和状态已经脱节了。
