仅还原至html初始值，非强制清空；需显式设value=""等属性并同步dom与属性值，动态字段或受控组件须用js手动清空。
直接用 <input type="reset"> 不能保证“清空”，它只负责“还原到 HTML 加载时的初始值”。你看到的“没反应”“清不干净”“清成默认值而不是空”，基本都卡在这个逻辑上。
为什么点 type="reset" 按钮后表单没变？
最常见原因是：目标控件没写 value、checked 或 selected 属性，或者写了但 JS 后续改了 DOM 值却没同步更新属性。
-
<input name="email">和<input name="email" value="">行为不同：前者可能保留用户输入，后者 reset 后一定为空 -
<textarea>默认内容</textarea>的初始值是标签内文本，不是value属性——所以要清空，得写<textarea value=""></textarea>（虽然语义略怪，但有效） -
<select><option value="a">A</option> <option value="b" selected>B</option></select>会被重置为选中 B；若删掉selected，就默认选第一个，不是清空 - 动态插入的字段（比如 JS append 的
<input name="phone">）完全不会被 reset 触及，因为它们没有“初始状态”
怎么让 type="reset" 真正清成“空”？
靠写死初始值 + 严格同步属性。这不是“配置技巧”，而是必须落地的操作。
- 所有
<input type="text">、<input type="email">等，显式写value="" -
<input type="checkbox">和<input type="radio">必须带checked属性才可被 reset 控制；要默认不选，就别写checked，或写checked=""再用 JS 清掉（但注意：写checked="false"不生效） -
<select multiple></select>不能只设value=""，得确保每个<option></option>都没selected属性，或用 JS 手动遍历options设option.selected = false - 如果用 JS 初始化表单（比如从 localStorage 读默认值），必须同步调用
el.setAttribute('value', 'xxx')，否则 reset 会回退到空载状态，而非你期望的“上次默认”
什么时候该放弃 type="reset"，改用 JS 手动清空？
只要出现以下任一情况，原生 reset 就不可靠，必须手写逻辑：
- 表单里混用了 React/Vue 的受控组件（比如部分 input 绑了
value+onChange）—— reset 只动 DOM，不动框架状态，界面毫无变化 - 需要清空富文本编辑器、日期选择器插件、自定义下拉等非原生控件
- 想把字段清成「完全空白」，而不是回到某个 HTML 默认值
- 有动态添加/删除的字段，或通过 AJAX 填充的
<select></select>选项 - 需要在清空前弹确认框、记录日志、或跳过某些字段（比如保留
id隐藏域）
此时推荐封装一个函数，遍历 form.elements，按类型分别处理：input.value = ""、input.checked = false、select.selectedIndex = -1、textarea.value = ""，并跳过 type="hidden" 或 disabled 元素（如果业务需要）。
监听重置行为却拿不到原始值？
reset 事件本身不携带“重置前的值”，它只是个通知信号。你想在重置前做判断或备份，必须自己提前存。
- 不要依赖
event.target在事件里读当前值——它已经是重置后的了（部分浏览器行为不一致） - 正确做法：在表单加载后、任何用户操作前，用
form.querySelectorAll('input, select, textarea')遍历一次，缓存el.value、el.checked、el.selectedOptions等 - 在
form.addEventListener('reset', e => { e.preventDefault(); ... })里用缓存值做对比或还原 - 注意：
form.reset()调用也会触发该事件，所以拦截逻辑要统一
真正难的不是“怎么写按钮”，而是搞清你要的到底是“还原快照”还是“强制清空”——这两个目标的技术路径完全不同，混用就会出 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
