重置按钮是还原到页面刚加载时的状态，而非清空；常见失效原因包括：reset元素未置于form内、表单字段无初始值、button漏写type="reset"；仅重置有name且非disabled/readonly的原生控件，初始值以HTML中value/checked/selected为准。
重置按钮不是“清空”，而是“还原到页面刚加载时的状态”——这点不搞清，90% 的重置失效问题都出在这儿。
为什么点 <input type="reset"> 没反应？
最常见原因就三个：
-
<input type="reset">或<button type="reset">没放在<form>标签内部，它就完全没绑定任何逻辑 - 表单字段没写初始值，比如
<input name="email">是空的，那重置后还是空——不是 bug，是它本来就没“可还原的东西” - 用了
<button>却漏写了type="reset"，浏览器默认当type="submit"，一按就提交了
type="reset" 能重置哪些字段？
只重置有 name 属性、且非 disabled 或 readonly 的原生控件：
-
<input type="text">、<input type="password">、<textarea>：还原 HTML 中写的value属性值（没写就是空） -
<input type="checkbox">、<input type="radio">：只还原初始checked属性是否存在（不是 JS 设置的checked = true） -
<select>：还原初始<option selected>，或第一个<option> -
<input type="hidden">和disabled字段：直接跳过，不碰
怎么让重置同时清掉 <div id="result"> 之类的结果区域？
原生重置不管非表单元素。得靠 onreset 事件补一刀：
立即学习“前端免费学习笔记（深入）”；
- 给
<form onreset="clearResult()">加属性（注意不是onclick） - 在
clearResult()里手动清空目标区域：document.getElementById('result').textContent = '' - 别用
innerHTML = ''清结果区，除非你确定里面没用户输入的富文本；textContent更安全 - 确保 JS 在 DOM 加载完后再执行，否则
getElementById找不到元素
框架项目（React/Vue）里千万别直接调 form.reset()
受控组件的 state 和 DOM 不同步，调了也白调：
- React 里点重置按钮，应该
setState把所有字段设回初始值，而不是操作 DOM - Vue 里同理，用
v-model绑定的数据才是唯一真相，DOM 重置会破坏响应式链 - 如果硬要用
form.reset()，必须紧接着手动同步 state，否则下次渲染就把旧值又打回来了 - 第三方组件（如日期选择器、富文本编辑器）完全不受影响，它们的值得调各自 API 清，比如
editor.clear()
重置按钮最坑的点不在代码怎么写，而在“初始值”到底是谁定的——是 HTML 里的 value 和 checked，不是 JS 填的，也不是用户上次输的，更不是服务端返回的。这点漏掉，所有重置逻辑都会跑偏。
