原生 type="reset" 按钮还原的是html初始值而非清空；失效主因有三：按钮在form外、漏写type属性、控件无html初始值；它不作用于js修改值、框架状态及第三方组件，真清空需手动遍历处理。
原生 type="reset" 按钮不是“清空”，而是“还原到页面刚加载时的 HTML 初始值”——理解这点，90% 的失效问题就解了一半。
为什么点 type="reset" 没反应？三个最常见硬伤
它不报错、不警告，只沉默失效，原因往往很基础：
-
<button type="reset"></button>写在<form></form>外面 —— 浏览器直接无视，连事件都不绑定 - 用了
<button></button>却漏写type="reset"—— 默认是type="submit"，一按就提交表单 - 表单控件没写初始值，比如
<input name="email">，那重置后仍是空，你以为没生效，其实是“本该如此”
form.reset() 和点击按钮行为一致，但能被 preventDefault() 阻止
两者都只还原 HTML 中定义的初始状态（value、checked、selected），但触发方式不同：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 点击
<button type="reset"></button>会冒泡，可在form.addEventListener('reset', e => e.preventDefault())中拦截 -
form.reset()调用也会触发reset事件，同样可被阻止，但它不依赖按钮存在，适合 JS 主动控制 - 别在
onsubmit里同步调this.reset()—— 可能导致 FormData 构建中断或字段残留，改用setTimeout(() => this.reset(), 0)或放在fetch().then()里
JS 动态改过的值、框架受控组件、第三方控件全都不受影响
原生 reset 对这些“非 HTML 初始状态”的内容完全无感：
-
input.value = "新内容"后点 reset → DOM 值被还原，但 JS 改的这个赋值不会回滚 - React 中
useState管理的输入框：DOM 清了，state 还是旧值，下次渲染立刻“闪回” -
<input type="file">在多数浏览器中 reset 后显示“未选择文件”，但文件对象引用可能仍存在，需额外清fileInput.value = '' - CKEditor、Flatpickr、
<el-date-picker></el-date-picker>等 —— 它们的值存在实例上，必须调各自 API，如editor.setData('')或picker.clear()
真要“清空”，就得自己遍历 + 分类型处理
绕开原生 reset，用 type="button" + 手动逻辑才是现代项目的通用解法：
- 遍历
form.elements，按类型分别设值：input.value = ''、textarea.value = ''、select.selectedIndex = -1、checkbox.checked = false - 对多选
<select multiple></select>，得循环所有option设.selected = false - 清完后手动移除校验类（如
classList.remove('error')）、清aria-invalid、聚焦第一个字段 - 务必加确认提示 —— 不能绑在
type="reset"上（preventDefault无效），要用<dialog></dialog>或轻量弹层，用户点“确定”后再执行上面清空逻辑
最容易被忽略的点：所谓“初始值”，永远是 HTML 解析那一刻的 value、checked、selected 属性，不是 JS 设置的，不是接口返回的，也不是用户上次填的。没在 HTML 里写清楚，后面所有 reset 行为都会偏离预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
