按钮需位于直接子级才生效；form.reset()须确保dom加载完成且仅重置初始字段；自定义逻辑应拦截reset事件并手动清理动态字段。
点击 <input type="reset"> 按钮没反应？先检查表单包裹关系
html 表单重置按钮必须位于 <form></form> 标签内部才能生效，这是最常被忽略的前提。浏览器只认「直属父级是 <form></form>」的 reset 按钮，嵌套在 <div>、<code><section></section> 甚至 <fieldset></fieldset> 里但脱离 <form></form> 的，一律不触发重置。
- ✅ 正确：
<form><input type="reset"></form> - ❌ 无效：
<form><div><input type="reset"></div></form>（虽然语义上没问题，但部分老浏览器或严格模式下可能失效） - ⚠️ 注意：
<input type="reset">不会触发表单的onreset事件，除非它在<form></form>内且未被 JavaScript 阻止默认行为
reset() 方法调用失败？确认元素引用和执行时机
JavaScript 调用 form.reset() 是更可控的方式，但容易因 DOM 加载时机或引用错误失败。它不依赖按钮，直接操作表单元素，但要求目标 <form></form> 已存在且可访问。
- 常见错误：脚本在
<form></form>标签前执行，document.getElementById("myForm")返回NULL - 推荐写法：
document.addEventListener("DOMContentLoaded", () => { document.getElementById("myForm").reset(); }); - 注意：
reset()仅恢复到页面**初始加载时的状态**，不是上次submit后的状态，也不是用户最后一次手动修改的状态 - 兼容性：所有现代浏览器都支持，IE8+ 也支持，无需 polyfill
自定义重置逻辑时，别直接覆盖 onreset 或监听 click 事件
如果想在重置前做校验、清空额外字段或记录日志，不要只靠 onreset 属性或给 <input type="reset"> 绑定 click —— 它们无法阻止默认重置行为，也无法拿到“原值”。
- ✅ 正确做法：用
event.preventDefault()拦截表单的reset事件，再手动调用form.reset()或自行赋值 - 示例：
form.addEventListener("reset", (e) => { e.preventDefault(); // 先处理自定义逻辑，比如清空富文本编辑器内容 editor.setContent(""); // 再执行原生重置 form.reset(); }); - ⚠️ 坑：
reset事件在reset()调用后才触发，所以不能靠它“预拦截”；真正能拦截的是用户点击reset按钮那一刻的表单事件
表单里有动态添加的字段？reset() 不会清理它们
reset() 只重置**html 初始存在的表单控件**。通过 JavaScript 动态插入的 <input>、<select></select> 等，即使加了 name 属性，也不会被还原 —— 因为它们不在初始 HTML 中，没有“初始值”可回退。
- 现象：动态添加的字段点击重置后仍保留内容，甚至可能报错
Uncaught TypeError: Cannot set Property 'value' of null - 解决：必须手动清理，例如遍历
form.querySelectorAll("[data-dynamic]")并设.value = ""或.checked = false - 性能提示：频繁动态增删字段时，用
reset()+ 手动清理比全量 DOM 替换更轻量，但需维护清理逻辑
重置逻辑看似简单，但真实项目里往往混着动态字段、第三方组件、异步渲染，这时候“原生 reset 是否还可靠”就得一个个验证——别假设它总能兜底。