原生html表单无双向绑定，需手动同步数据：初始化时写入dom，用户输入时通过input事件更新js对象；避免reset()导致数据不一致，复杂场景应使用框架。
HTML 表单本身不支持数据绑定
原生 HTML 表单没有 v-model 或 ngModel 那样的双向绑定机制。所谓“设置表单数据绑定”，实际是靠 JavaScript 手动读写元素的 value、checked、selected 等属性，再配合事件监听实现的模拟绑定。
常见错误现象：
– 页面加载后 JS 修改了 input.value，但 UI 没更新（其实是改对了，只是没触发渲染）；
– 用户输入后，JS 读 input.value 得到旧值（忘了监听 input 或 change）；
– 用 innerHTML 替换表单内容后，绑定逻辑丢失（事件监听器被清空）。
- 所有表单控件都要单独处理：文本类用
value，复选框/单选框用checked，下拉框用selectedIndex或value - 推荐监听
input事件而非change，前者实时响应，后者只在失焦或回车时触发 - 不要依赖表单元素的
dataset存状态——它和视图无关，容易和真实值脱节
如何用原生 JS 实现一个最小可用的数据同步
核心就两步：初始化时把数据写进 DOM；用户操作时把 DOM 值写回数据。中间不依赖框架，也不引入虚拟 DOM。
示例场景：一个登录表单，数据对象为 formData = { username: '', password: '' }：
立即学习“前端免费学习笔记（深入）”；
const form = document.querySelector('form');
const formData = { username: '', password: '' };
// 初始化：填入表单
document.getElementById('username').value = formData.username;
document.getElementById('password').value = formData.password;
// 同步：用户输入时更新数据
document.getElementById('username').addEventListener('input', e => {
formData.username = e.target.value;
});
document.getElementById('password').addEventListener('input', e => {
formData.password = e.target.value;
});
- 避免用
form.elements遍历赋值——类型判断复杂（select、textarea、checkbox行为不同） - 如果表单字段多，建议封装一个
bindInput(el, data, key)函数，而不是硬写一堆监听器 - 注意
textarea的值也通过value读写，不是textContent
为什么不用 form.reset() 来“重置绑定”
form.reset() 只会把表单控件恢复到初始 value（即 HTML 中写的值），不会更新你维护的 JS 数据对象。它和你的数据绑定逻辑完全脱钩。
- 调用
reset()后，formData还是旧值，UI 却变了 → 数据不一致 - 如果初始 HTML 没写
value（比如<input name="age">），reset()会清空，但你的formData.age可能非空 - 正确做法：重置时，先更新
formData，再手动赋值给每个控件，或者用上面封装的bindInput反向同步
使用框架前先搞清原生边界在哪里
Vue 的 v-model、React 的受控组件、Svelte 的 bind:value，底层都是在模拟“输入 → 更新 JS 对象 → 写回 DOM”这个闭环。但它们自动处理了事件类型差异、异步更新、批量更新等细节。
容易被忽略的一点：
原生绑定无法自动处理嵌套对象（如 user.profile.name）、数组动态增删、或深层响应式。一旦出现这类需求，手写同步逻辑很快失控——这时候不是“能不能做”，而是“值不值得自己做”。
