点击 reset 按钮后，表单并非回到 js 修改后的值，而是恢复 html 初始 value/checked/selected 属性值；对 react/vue 等受控组件无效，且不触发 input/change 事件，易致数据丢失。

点击 reset 按钮后，表单真的“回到初始值”吗？

不是。它回到的是 HTML 加载完成时各字段的 value 属性（或 checked/selected 状态）值，和 JS 后续改过的值无关。比如你用 JS 动态设了 input.value = "新内容"，点 reset 会丢掉它，回到最初写的 value="旧内容" 或空字符串。

• 只重置原生表单控件：<input>、<textarea></textarea>、<select></select>、<button type="reset"></button>
• 对自定义组件（如 React 的受控输入、Vue 的 v-model 绑定）完全无效——它们状态在 JS 里，reset 不碰 JS
• 如果没写 value 属性，<input type="text"> 会被清成空字符串；但 <input type="checkbox"> 默认不勾选，除非加了 checked

为什么 type="reset" 按钮经常“不起作用”或行为诡异？

常见原因是表单结构或事件干扰。reset 按钮必须在 <form></form> 内部才有效；如果被 JS 阻止了默认行为（比如绑了 onclick="return false" 或 event.preventDefault()），它就彻底失效。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 不在 <form></form> 标签内？→ 点击无任何反应
• 父级有 event.stopPropagation()？→ reset 事件传不到 form 元素
• 用了 Web Components 或 Shadow DOM？→ reset 不穿透 Shadow Boundary，子组件内状态不会重置
• 某些框架（如 Angular）会拦截表单事件，需显式允许 reset 传播

想真正清空表单，比 type="reset" 更靠谱的做法

手动重置更可控，尤其当表单混用原生控件和 JS 状态时。核心是：同步 DOM 值 + 同步 JS 状态。

• 对纯 HTML 表单：调用 formElement.reset() 方法，效果等同点击 reset 按钮，但可由 JS 触发
• 对 React 受控组件：别依赖 reset，改用 useState 初始化值，再 setState(initialValues)
• 对需要保留部分字段的场景：不要用 reset，而是遍历 form.elements，按需设 el.value = ""、el.checked = false 等
• 注意 <textarea></textarea> 的值在 DOM 中靠 textContent，不是 value 属性

reset 的兼容性和性能影响几乎可以忽略，但语义风险很实在

它不触发 input 或 change 事件，所以依赖这些事件做校验、日志或联动的逻辑会漏掉。而且用户一旦误点，所有已填内容瞬间消失，没有确认、无法撤销。

• Chrome/Firefox/Safari/Edge 全支持 form.reset() 和 type="reset"，无兼容问题
• 性能上毫无负担，但它会强制重绘所有相关表单控件
• 最大的坑是 UX：没有任何浏览器提供“reset 前确认”机制，也不能监听 reset 是否发生（除非拦截表单 reset 事件并自己处理）
• 很多设计系统（如 Bootstrap、Material UI）干脆不提供 reset 按钮样式，就是因为它容易引发数据丢失投诉

实际项目里，只要表单涉及 JS 状态管理或用户可能已输入大量内容，reset 就不该是默认选项。真正要清空，得从状态源头下手，而不是指望浏览器替你“回滚”。

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