原生 reset() 仅按 html 初始属性重置表单，无视 js 动态设置的 value、disabled 等状态；对 date/file/select 等控件行为受限；框架中需同步 state 才能真正重置。
reset() 只读 HTML attribute，不认 JS 设置的 value
点 type="reset" 按钮后输入框变空，而不是回到你 JS 里设过的值——这是正常行为。浏览器的 reset() 逻辑只看元素初始的 HTML 属性：比如 <input value="张三"> 才会重置回“张三”；如果你用 el.value = "李四" 改过，重置时它完全无视，仍按 HTML 中写的值还原。
常见错误现象：el.getAttribute('value') 返回 null，但 el.value 是空字符串，说明 HTML 没写 value 属性，此时重置就是清空，不是“恢复”。
- 想靠重置恢复 JS 动态设的值？不可能，必须自己缓存并手动赋值
-
<input type="date" value="2024-01-01">重置后也显示为空白——HTML5 规范如此，reset()对 date/time/number 等控件默认清空，不认value属性 - 用
el.valueAsDate读写日期易出兼容问题，统一用字符串操作el.value更稳
按钮自身状态不会随 reset 自动恢复
type="reset" 按钮只是触发器，不是被重置对象。它被 JS 设为 disabled、改了 textContent 或加了 loading class，重置后一概保留原样。
典型误操作：提交后禁用按钮并改文案为“提交中”，点重置按钮后它还是禁用+旧文案，用户无法再点。
- 必须提前缓存按钮初始状态：
const initDisabled = btn.disabled、const initText = btn.textContent - 在
form.addEventListener('reset', ...)里恢复，且要用setTimeout(..., 0)包裹——否则 DOM 尚未重绘，状态更新可能被浏览器重置逻辑覆盖 - 注意：
form.reset()调用不会触发reset事件，需手动dispatchEvent(new Event('reset'))才能进监听器
checkbox、select、file 等控件要单独处理
reset() 对 <input type="file"> 完全无效（安全限制），对 checkbox 和 radio 只恢复 checked 属性初始值，对 <select></select> 只恢复 selected 的 <option></option>，不碰 selectedIndex 或 value property。
-
<input type="file">必须手动执行el.value = ""，否则重置后仍显示已选文件名 - 多选
<select multiple></select>需遍历options，根据getAttribute('selected')判断初始选中项，再设option.selected = true - 不要只依赖
el.value恢复 select，它只反映当前选中项，不体现多选或初始状态
框架项目里 v-model / 受控组件重置失效
Vue 的 v-model 或 React 的受控组件，数据源在 JS state，DOM 只是视图映射。reset() 只改 DOM，state 不变，导致视图“看起来没重置”。
- Vue 中混用
v-model和type="reset"是反模式，应改为点击时同步重置 data：@click="form.reset(); formData = { ...initialData }" - React 中用
useRef调form.reset()没用，必须调setState(initialData)或用react-hook-form的reset() - Ant Design 等 UI 库提供
form.resetFields()，它既清 DOM 又清内部状态，比原生reset()可靠
最常被忽略的是：重置逻辑一旦涉及 JS 动态初始化（比如从 localStorage 读初始值）、HTML5 新型控件（date/number）、或框架绑定，原生 reset() 就退化为“仅清空”工具。真要恢复“业务意义上的初始状态”，就得自己存快照、手动同步、并兜住所有边界 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
