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 逐项设值：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 文本类（text、email、password、number、search）：el.value = ""
• <textarea></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 清空

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！