HTML表单重置默认恢复初始HTML状态而非清空；需用JS逐项设值实现真归零；动态初始值须手动缓存并还原；提交后重置应延时执行以防丢数据。
HTML 表单重置操作默认**不等于“清空所有输入”**，而是“恢复到页面加载时的初始 HTML 状态”。想真正清空或精准还原，得看你的目标：是简单回退到写死的 value、还是彻底归零、或是保留动态设置后的“理想初始值”？下面分情况说明。
用原生 reset 按钮或 form.reset() 恢复 HTML 初始值
这是最轻量的方式，但行为严格受限于 HTML 属性：
-
<button type="reset">重置</button>必须放在<form></form>内部才生效 - 它只认 HTML 中写的初始状态：
<input name="name" value="张三">→ 重置后显示“张三”；<input name="age">→ 重置后为空字符串 -
<textarea>请填写简介</textarea>→ 重置后仍显示“请填写简介” -
<input type="checkbox" checked>→ 重置后保持勾选；没写checked就取消勾选 - JS 动态改过的
el.value = "新内容"或el.checked = true，会被完全覆盖，reset 不认这些
手动清空所有字段（真·归零）
如果你点“重置”就想让所有输入框变空、所有选项取消、所有多选清掉，不能依赖原生 reset，得用 JavaScript 逐项设值：
- 文本类（
text、email、password、number、search）：el.value = "" -
<textarea>：el.value = "" - 单选/复选框：
el.checked = false - 下拉框（单选）：
el.selectedIndex = -1或el.value = "" - 下拉框（多选）：遍历
el.options，设每个option.selected = false - 注意过滤
disabled元素（原生form.elements不自动跳过，需手动判断）
精准还原 JS 动态设置后的“自定义初始值”
比如页面加载后你用 JS 填了默认值，或用户切换模板后初始化了一组字段，之后想一键回到那个状态——原生 reset 完全做不到，必须自己存快照：
立即学习“前端免费学习笔记（深入）”；
- 在 DOM 加载完成、任何交互前，遍历表单字段，缓存它们的当前
value、checked、selectedOptions等 - 监听
reset事件，在事件触发后（用setTimeout(..., 0)确保时机），把缓存值重新赋回去 - 对
<input type="file">单独处理：fileInput.value = ""（reset 对它效果不稳定） - 避免用
getAttribute('value')取初始值——如果 HTML 没写value=""，它返回null，而你想要的是空字符串
提交后清空的特别注意事项
表单提交后调 reset，别在 onsubmit 里直接写 this.reset()，否则可能丢数据：
- 同步调用会立即清空 DOM，但浏览器可能还没发完请求（尤其用 iframe 或 fetch 时）
- 推荐写法：
onsubmit="setTimeout(() => this.reset(), 0)"，把重置推到任务队列末尾 - 若用了
event.preventDefault()+fetch，就在fetch().then(() => form.reset())里调 - 富文本编辑器、日期选择器等第三方控件，通常不响应原生 reset，需调它们自己的 API 清空
