reset() 方法重置表单是还原为HTML初始值，而非清空；若需清空应遍历控件手动设空，框架中须同步数据状态而非操作DOM。
用 reset() 方法重置表单最直接，但注意它只还原初始值
表单重置的本质不是清空，而是“回到页面加载时的值”。如果你动态改过 value、选中状态或通过 JS 设置了 checked/selected，reset() 仍按 HTML 中写的初始值恢复——哪怕你后来用 JS 把它改成了别的。
常见错误现象：document.getElementById('myForm').reset() 看似执行了，但文本框还是旧内容、复选框没取消勾选。原因往往是：初始 HTML 里没设 value 或 checked，JS 却手动赋过值，导致“初始值”其实是空或未选。
- 确保关键字段在 HTML 中显式声明初始状态，比如
<input value="默认">、<select><option selected>选项1</option></select> - 如果必须靠 JS 初始化（如从接口取默认值），重置前得先用 JS 把这些值写回 DOM 属性，否则
reset()不认 - 不推荐用
form.reset()后再手动清空——这会干扰原生行为，且在部分浏览器中触发两次 input 事件
清空表单比重置更常见，forEach 遍历控件最可控
多数场景其实要的是“清空”，不是“还原”。这时候别依赖 reset()，直接遍历所有可交互元素，逐个设空或重置状态更可靠。
使用场景：搜索表单提交后清空关键词；多步骤表单返回上一步时清掉后续填写项；表单校验失败后清除用户输入但保留初始配置。
立即学习“前端免费学习笔记（深入）”；
- 用
form.querySelectorAll('input, select, textarea')拿到全部控件，再用forEach处理 - 区分类型处理：
type="checkbox"和type="radio"设checked = false；select设selectedIndex = -1或value = ''；textarea和普通input设value = '' - 注意
disabled或readonly元素是否需要一并处理——它们不会被reset()影响，但手动清空时容易漏掉
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 el.value = '';
});
Vue/React 项目里别调 reset()，数据驱动才是正解
框架项目中，DOM 状态是数据的投影。直接操作 DOM（比如调 reset()）会破坏响应式一致性，尤其在 Vue 的 v-model 或 React 的受控组件里，很可能出现界面上清了但 state 还是旧值，下次渲染又打回来。
性能影响：强行同步 DOM 和 state 可能触发额外 re-render，还可能引发 warning（比如 React 报 “A component is changing a controlled input to be uncontrolled”）。
- Vue：重置应映射为对
data或ref的赋值，比如formData = { name: '', email: '' }，然后让模板自动更新 - React：用
setState或useReducer清空对应字段，避免直接操作ref.current.form.reset() - 如果必须兼容旧逻辑（比如嵌入第三方表单组件），重置后立刻同步一次 state，而不是依赖 DOM 反推
reset 按钮和 JS 调用行为不完全等价，留意默认提交拦截
HTML 里的 <button type="reset"> 会触发表单的 reset 事件，并自动阻止默认提交行为；而 JS 调用 form.reset() 不会触发该事件，也不会阻止任何其他事件——这点常被忽略。
容易踩的坑：给 reset 按钮绑了 click 事件，里面只写了 form.reset()，结果发现自定义的 reset 事件监听器没执行；或者误以为它会像表单提交一样自动 preventDefault，结果页面跳转了。
- 想确保
reset事件触发，就用<button type="reset">，不要用type="button"+ 手动调用 - 如果必须用 JS 调用，手动 dispatch 一次事件：
form.dispatchEvent(new Event('reset', { cancelable: true })) - 在
submit处理函数里调reset()，记得event.preventDefault()，否则表单可能真提交了
