HTML表单无内置双向绑定，需用JavaScript手动读写value等属性；input/textarea用input事件实时同步，select多选须遍历selectedOptions，checkbox/radio按组操作，初始值与运行时状态分离。
HTML 表单控件本身没有内置的「双向绑定」机制，所谓「动态绑定」实际是靠 JavaScript 主动读写 value、checked、selectedOptions 等属性实现的。关键不在「绑定」这个词，而在你何时读、何时写、写到哪。
input / textarea 的 value 同步必须手动触发
浏览器不会自动把用户输入同步到变量或对象字段里。常见错误是以为给 input 设了 id 就等于“绑定了”，结果后续代码读 document.getElementById('myInput').value 时拿到的是初始空值——因为没监听变化。
- 用
input事件（非change）实时捕获每次按键/粘贴：el.addEventListener('input', () => data.name = el.value) -
textarea和input[type="text"]行为一致，但input[type="number"]的value是字符串，需用parseFloat()或parseInt()转类型 - 不要依赖表单提交时才取值：如果用户没点提交按钮，或者用回车提交但没监听
submit，数据就丢了
select 多选和单选的取值逻辑完全不同
select 元素的 DOM API 对单选和多选返回结构不一致，直接读 value 只能拿到第一个选中项的值，对多选完全失效。
- 单选：
selectEl.value可用，等价于selectEl.selectedOptions[0]?.value - 多选（含
multiple属性）：selectEl.value总是空字符串，必须遍历selectEl.selectedOptions取每个.value - 用
Array.from(selectEl.selectedOptions).map(opt => opt.value)安全转数组，避免类数组陷阱 - 设置选中状态时，别直接改
option.selected = true，优先用selectEl.value = 'xxx'（单选）或循环设option.selected（多选）
checkbox 和 radio 需区分「组」与「单个」
radio 按 name 分组，同一组内只能有一个被选中；checkbox 则各自独立。它们都用 checked 属性，但批量操作逻辑差异大。
立即学习“前端免费学习笔记（深入）”；
- 获取所有勾选的 checkbox：
document.querySelectorAll('input[type="checkbox"]:checked')，再 map 取value - 设置某组 radio 选中：
document.querySelector('input[name="gender"][value="female"]').checked = true - 清空 radio 组：不能只设
checked = false，要先找到当前选中的那个再取消，否则可能无解 - 注意：radio 的
value是字符串，哪怕后端传的是数字，HTML 里也得写成value="1"，JS 读出来仍是字符串
避免用 innerHTML 替换整个表单来“刷新绑定”
有人试图用 form.innerHTML = newHtml 重绘表单来“更新数据”，这会丢失所有用户已输入的内容、焦点状态、滚动位置，还可能破坏事件监听器。
- 正确做法是只更新具体控件的
value、checked、selectedOptions属性 - 如果数据来自异步请求，建议在请求完成后再逐个赋值，而不是替换 DOM 树
- 对
select动态增删option时，先清空select.innerHTML = ''或循环removeChild，再 append 新option，避免重复 - 性能敏感场景（如百个 checkbox），用
DocumentFragment批量插入，而非多次appendChild
最易被忽略的是：表单控件的「初始值」由 HTML 的 value、checked、selected 属性决定，而 JS 读写的 .value、.checked 是运行时状态。两者在页面加载后就脱钩了——改属性不影响属性值，改属性值也不影响运行时状态。这个分离关系，是绝大多数绑定失效的根源。
