form.reset() 并非清空表单，而是将表单控件值回退至初始的 defaultValue、defaultChecked 或 defaultSelected；动态添加元素、受控组件及无 default 属性的 contenteditable 区域均不受影响，且 type="reset" 按钮需为 form 直接子元素并存在可重置控件才生效。
form.reset() 为什么没清掉你改过的值
它根本不是“清空”，而是回退到 defaultValue、defaultChecked、defaultSelected 这些初始属性值。如果你用 JS 改过 input.value = "xxx"，但没同步写 input.defaultValue = "xxx"，那 form.reset() 就会把值设回 HTML 里写的原始 value（比如空字符串或旧默认值），而不是你当前看到的值。
常见错误现象：
-
textarea用了innerText或innerHTML填内容，但重置只看defaultValue -
checkbox点击后状态变了，但没同步input.defaultChecked = input.checked -
select的selected属性被 JS 删除或移动过，导致 reset 后选中项错乱
动态添加的字段和第三方组件完全不响应 reset
原生 form.reset() 只处理页面加载时就存在的 DOM 节点。JS 动态插入的 input、Vue/React 渲染的受控组件、富文本编辑器（如 TinyMCE）、日期选择器（如 flatpickr）——这些都不在初始快照里，reset() 对它们毫无影响。
使用场景：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 表单支持“添加一行地址”按钮，新行是 JS
appendChild插入的 → 不会被重置 - 用
react-hook-form管理表单状态 →reset()只动 DOM，不动 React state，界面无变化 - 表单里嵌了
contenteditable="true"区域 → 它没有defaultValue，reset 完全忽略
type="reset" 按钮失效的三个隐蔽原因
不是代码写错了，而是 DOM 结构或控件有效性出了问题。
- 按钮不是
<form>的**直接子元素**：比如套在<div>或<fieldset>里，IE11 和部分 Chromium 会静默忽略 - 表单内没有一个启用的、可重置的控件：全
disabled、全display: none，或只有<button type="submit">—— 此时点击无反应，也不报错 -
<input type="reset">被包裹在自定义组件里（如 Web Component shadow DOM），事件无法穿透到 form 上级
想弹确认框？别监听 reset 事件
reset 事件在重置**开始前**触发，且支持 event.preventDefault() —— 但很多人误以为它是“点击按钮后触发”，结果绑在按钮上白忙活。
正确做法：
- 给
<form>绑addEventListener("reset", ...)，不是给按钮 - 在回调里用
confirm()判断，!isConfirmed && event.preventDefault() - 千万别用
<input type="reset" onclick="return confirm(...)"/>：部分浏览器根本不触发 onclick，且即使触发，重置也早已完成
真正容易被忽略的是：reset 事件不冒泡出 <form>，也不会触发子元素的 input 或 change 事件。如果你的校验逻辑依赖这些事件，重置后得手动 dispatchEvent 补上。
