HTML表单重置按钮还原的是页面加载时的HTML初始值，而非JS修改后的值或用户输入；它不触发框架状态更新，也不清空文件输入和第三方组件，需手动实现真正“清空”逻辑。
HTML表单重置按钮不是“清空输入”，而是“还原到页面刚加载时的初始状态”——这个根本认知错位，是90%重置失效、用户抱怨、甚至线上 Bug 的源头。
type="reset" 按钮只还原 HTML 初始值，不认 JS 改过的值
它读取的是 DOM 解析时的 value、checked、selected 属性，不是运行时 JS 赋的值。比如：
-
<input name="email" value="user@example.com">→ 点重置后显示"user@example.com"，不是空 -
<input type="checkbox" name="agree">（没写checked）→ 重置后始终未选中 -
document.querySelector('input').value = 'new@demo.com'→ 重置后立刻被覆盖回初始值，JS 修改白费 -
<input type="file">→ 大多数浏览器完全不处理，文件不会清掉
reset 按钮必须嵌套在 <form> 内，且 type 不可省略
脱离表单或漏写 type="reset"，按钮就彻底失效，但浏览器不报错、也不警告：
- ✅ 正确：
<form><button type="reset">重置</button></form> - ✅ 正确：
<form><input type="reset" value="恢复默认"></form> - ❌ 错误：
<button>重置</button>（默认是type="submit"，一按就提交） - ❌ 错误：
<button type="reset">重置</button>单独放在<form>外 - ❌ 错误：
<input form="myForm" type="reset">（form属性对 reset 无效）
React/Vue 中直接用 form.reset() 会破坏响应式链
框架里 DOM 和状态（state / ref / data）是两套系统。原生重置只动 DOM，不动框架状态：
立即学习“前端免费学习笔记（深入）”；
- React：点击
type="reset"后，input 的 DOM 值变了，但useState的值还是旧的 → 下次渲染，state 又把 DOM 覆盖回去 - Vue：同理，
v-model绑定的数据不变，DOM 重置后立刻“闪回” - 正确做法：用
type="button"+onClick，手动调setState({ ...initialState })或ref.value = { ... } - 第三方组件（如
<DatePicker>、<Editor>）完全不受影响，必须调各自 API 清除，比如editor.clear()
想真正“清空”？别依赖原生 reset，自己控制每一步
现代项目里，“还原初始值”几乎从不等于用户体验需要的“清空”。要安全、可控、可确认地清除，得手动实现：
- 按钮设为
type="button"，绑定onClick - 遍历
form.elements，按类型分别处理：.value = ''、.checked = false、.selectedIndex = -1、多选框逐个取消.selected - 同步非表单区域：比如清空
<div id="result">用textContent = ''，不用innerHTML - 加确认提示：不能靠
onreset+confirm()（它无法拦截原生 reset），要用自定义弹窗 + 用户点“确定”后再执行清除逻辑 - 清除后禁用按钮 300ms，防止重复点击；再聚焦到第一个字段，方便继续操作
最常被忽略的一点：所谓“初始值”，永远是 HTML 源码里写的 value="xxx"、checked、selected ——不是 localStorage 里的上次输入，不是接口返回的默认数据，也不是 JS 初始化时塞进去的值。没写，就没有“可还原的东西”。
