type="reset"按钮仅恢复HTML初始值，对JS动态值、框架受控组件、disabled字段及HTML5日期控件无效；常见失效原因是未置于<form>内或误当“清空”使用。
type="reset" 按钮只恢复初始值，不是清空；它对 JS 动态设置的值、框架受控组件、disabled 字段或 HTML5 日期控件均无效——直接用会踩坑。
为什么 type="reset" 按钮点完没反应或重置不对
最常见原因是按钮没放在 <form> 标签内部，浏览器直接忽略。其次是误以为它“清空”，其实它只回退到 HTML 加载时的快照：<input value="默认"> 会回到“默认”，<input value=""> 则变为空；但若 JS 执行过 el.value = "已填"，重置后仍是“已填”。<textarea> 的初始内容必须写在标签体里（<textarea>初始值</textarea>），不能靠 value 属性。
-
type="date"、type="number"等控件重置后显示空白，即使写了value="2024-01-01" -
disabled字段会被重置（DOM 值恢复），但用户不可编辑，看起来像“没动” -
readonly字段只要带初始值，也会被还原——这点常被忽略 - Vue/React 中
v-model或useState不同步，DOM 重置了，组件状态还是旧的
如何让 form.reset() 真正生效
调用 form.reset() 和点 type="reset" 效果完全一致，但它不触发 click 事件，只触发 reset 事件。所以监听 reset 事件比监听按钮 click 更可靠，尤其要清理验证提示、关闭弹窗等副作用时。
- 确保所有初始值都通过 HTML 属性声明：比如
<input value="张三">、<input checked>、<option selected> - 不要在页面加载后用 JS 覆盖
value或checked，否则reset()会失效 - 若必须动态初始化（如从 localStorage 读取），先调用
form.reset()，再手动赋值还原，而不是反过来 - 需要兼容旧版 Safari？加一层
form.addEventListener('reset', handler)兜底，别只信按钮 click
怎么真正“清空”而不是“还原初始值”
想一键全空，就得手动设值：form.reset() 只是起点，之后必须补逻辑。重点不是遍历 form.elements，而是按类型精准处理：
立即学习“前端免费学习笔记（深入）”；
-
<input type="text|email|password|search">：设el.value = "" -
<textarea>：同样设el.value = ""（不是innerHTML） -
<input type="checkbox|radio">：设el.checked = false -
<select>单选：设el.selectedIndex = -1或el.value = "" -
<select multiple>：遍历el.options，逐个设opt.selected = false - 第三方组件（如
el-date-picker）：必须调其 API（如pickerRef.value.resetFields()），不能操作 DOM
框架项目里重置失效怎么办
Vue 和 React 中，原生 reset() 只改 DOM，不动响应式数据，视图必然不同步。不要混用 v-model 和 type="reset"，也不要用 useRef 调 reset() 就完事。
- Vue：要么
@click="form.reset(); formData = { ...initialData }"，要么封装一个restoreDefaults()同时更新 DOM 和 data - React：必须同步修改
useState或useReducer，不能只操作 ref - 用 Formik / react-hook-form？直接调
resetForm()或reset()，它们内部已处理 DOM + state 双向同步 - 自定义组件（如封装的 tag 输入框）：监听
reset事件，在 handler 里清空内部.tags或.value
真正难的不是写几行 reset 代码，而是判断“这个字段的初始状态到底该由谁定义”——HTML 属性、JS 默认值、框架 state，还是用户上次填写缓存？一旦源头混乱，重置就变成玄学。
