form.reset() 不清空值是因为它只恢复到初始html属性状态，不处理js修改的dom属性、动态插入控件、无name属性元素、file类型输入及disabled/hidden表单。
form.reset() 为什么没把值清空
因为 form.reset() 不是“清空”，而是“回退到初始 HTML attribute 状态”。你用 JS 改过 input.value = "张三"，它不会认；textarea 是用 innerText 填的，它也不管；select 用 JS 切了 selectedIndex 却没写 selected 属性，重置后就丢状态。
关键限制：
-
form.reset()只读value、checked、selected这些 HTML attribute，不读 DOM property - 动态插入的控件（比如 Vue 渲染的
input）不在初始 DOM 中，reset()完全忽略 - 所有参与重置的控件必须有
name属性，否则跳过 -
type="file"的文件列表永远不清，必须手动设el.value = '' - 整表单
disabled或display: none时，reset()静默失败，无报错
手动清空比 reset() 更稳的写法
真要“全部变空”，直接操作 DOM 是多数业务场景下最可控的选择。重点不是统一设 value，而是按类型分别处理，并跳过非交互字段。
推荐逻辑：
-
input[type="text"]、input[type="email"]、textarea：统一设el.value = "" -
input[type="checkbox"]、input[type="radio"]：设el.checked = false -
select单选：设el.selectedIndex = -1；多选：遍历el.options，逐个设option.selected = false - 跳过
type="hidden"、type="submit"、type="button"，除非业务明确要求清它们 - 注意
readonly和disabled元素是否需要一并清理——它们的value仍可读可写，但 UI 不响应
简短示例：
form.querySelectorAll('input, select, textarea').forEach(el => {
if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
else if (el.tagName === 'SELECT') el.selectedIndex = -1;
else if (el.type !== 'hidden' && el.type !== 'submit' && el.type !== 'button') el.value = '';
});
框架项目里别碰 form.reset()
Vue 的 v-model、React 的受控组件，DOM 是数据的投影。调 form.reset() 会破坏响应式一致性：界面上清了，state 还是旧值，下次 re-render 又打回来。
更糟的是：
- React 可能报
"A component is changing a controlled input to be uncontrolled"警告 - Vue 重置应走
data或ref重赋值，再让模板自动同步 - React 应更新
useState或useReducer，而不是改 DOM
动态字段和 localStorage 回填时容易丢值
表单中动态增删的字段，它们的值不会被 FormData 自动捕获，也不会被 form.reset() 处理，除非 DOM 节点存在且有 name 属性。
同样，localStorage 里也得对应更新 key，否则刷新后回填时找不到那个字段——尤其当字段名带索引（如 item-0-name）或由框架生成时，key 必须严格匹配。
最容易被忽略的一点：回填时，checkbox 和 radio 不是设 value，而是设 checked；select[multiple] 得用 selectedOptions 判断并还原，不能只靠 value 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
