重置按钮是回退到页面刚加载时的状态，必须用<button type="reset">并置于<form>内；初始值须由HTML属性（如value、checked、selected）定义，JS或框架设置的值不会被重置。
重置按钮不是“清空”，而是“回退到页面刚加载时的状态”——这点没理解透，写出来大概率点不动或行为诡异。
button type="reset" 和 input type="reset" 选哪个
优先用 <button type="reset">。它支持内嵌 HTML（比如加个图标 <svg>）、可设 aria-label、语义更明确；<input type="reset"> 只能靠 value 属性改文字，没法放标签或样式。
关键陷阱：<button> 不写 type 属性，默认是 submit——点一下直接提交表单，根本不会重置。
- 必须显式写
type="reset" - 必须放在
<form>标签内部，不能被其他容器（如<div>）隔开 - 如果表单用了
form属性指向外部<form id="xxx">，那按钮只对那个目标表单生效
为什么点了没反应？常见失效原因
最常遇到的不是代码写错，而是初始状态没铺好。
立即学习“前端免费学习笔记（深入）”；
<input type="text"> 没写 value 属性，重置后可能保留用户上次输入（取决于浏览器）；<input value=""> 才真能清空；<textarea> 重置的是标签内文本，不是 value 属性。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<select>必须有带selected的<option>，否则重置不选中任何项 -
<input type="checkbox">或<input type="radio">要靠 HTML 里的checked属性决定初始状态，JS 设置的.checked = true不会被重置还原 - 动态 JS 填充的值（比如
el.value = "abc"）不会被重置影响——除非你同步改了el.setAttribute('value', 'abc')
form.reset() 和点击按钮行为一样吗
完全一致。调用 document.querySelector('form').reset() 触发的逻辑和点 <button type="reset"> 一模一样：都是回退到 DOM 加载完成那一刻的属性快照。
但注意：reset() 方法不会触发 click 事件，只会触发 reset 事件（监听 form.addEventListener('reset', ...) 可捕获）。
- 别在
reset事件里写event.preventDefault()——它阻止不了重置，只让你后续逻辑失效 - 想加确认弹窗？不能拦原生重置，得换成
<button type="button">+ 手动遍历清空字段 - Safari 对
reset事件冒泡处理略特殊，建议监听直接绑定到form元素上
框架里（React/Vue）还能用 type="reset" 吗
基本不能。React 的受控组件靠 value + onChange 维护状态，原生 reset 只改 DOM，不改 React state，界面看起来毫无变化。
Vue 类似：v-model 绑定的字段，reset 不会更新响应式数据。
- 纯静态 HTML 表单才真正可靠
- 用了框架，就别碰原生
type="reset"，改用自定义按钮 + 清空对应 state 的逻辑 - 第三方 UI 库（如 Ant Design）通常提供
form.resetFields()这类方法，优先用它们
真正的难点不在怎么写按钮，而在于搞清楚“初始值”到底是谁写的——是 HTML 属性、JS 初始化、还是框架默认值。三者不统一，重置就必然失灵。
