input type="reset" 不是清空按钮，而是还原字段到页面加载时的HTML初始值；常见失效原因有三：未嵌套在form内、控件缺value/checked/selected属性、button漏写type="reset"。
input type="reset" 不是“清空按钮”，它只还原字段到页面加载时的 HTML 初始值——这点没理清，所有“点了没反应”“清不干净”问题都会反复出现。
为什么 input type="reset" 点了没反应？
最常见原因就三个，且都和结构或属性有关：
-
input type="reset"没包在<form>标签内部，它就完全不绑定任何逻辑 - 表单字段没写
value、checked或selected属性，比如<input name="email">，重置后仍是空——不是 bug，是它本来就没“可还原的东西” - 用了
<button>却漏写type="reset"，浏览器默认当type="submit"，一按就提交了
input type="reset" 能重置哪些字段？
它只处理有 name 属性、且非 disabled / readonly 的原生控件，行为严格按 HTML 属性走：
-
<input type="text">、<textarea>：还原 HTML 中写的value或标签内文本（<textarea>内容</textarea>） -
<input type="checkbox">、<input type="radio">：只还原初始checked属性是否存在（JS 设置的el.checked = true不算数） -
<select>：还原带selected的<option>，若都没标，就选第一个 -
<input type="hidden">和disabled字段：直接跳过，不碰
怎么让 input type="reset" 真正清成“空”？
靠显式写死初始值 + 保证属性与 DOM 同步。这不是技巧，是必须落地的操作：
立即学习“前端免费学习笔记（深入）”；
- 所有文本类输入，显式写
value=""：<input name="email" value=""> -
<textarea>要清空，得写<textarea value=""></textarea>（虽然语义略怪，但有效） - 复选/单选要默认不选，就别写
checked；写了又想清掉，用 JS 设el.checked = false，但注意checked="false"不生效 - 动态插入的字段（比如 JS
appendChild的<input name="phone">）完全不会被重置，因为没有“初始状态”
重置后还要清非表单区域（如结果 <div id="result">）？
原生重置不管非表单元素，得靠 onreset 补一刀：
- 给
<form onreset="clearResult()">加属性（注意不是onclick） - 在
clearResult()里手动清目标区域：document.getElementById('result').textContent = '' - 别用
innerHTML = ''清结果区，除非你确定里面没用户输入的富文本；textContent更安全 - 确保 JS 在 DOM 加载完后再执行，否则
getElementById找不到元素
真正难的不是写按钮，而是搞清「初始值」到底是谁写的：HTML 属性、JS 赋值、框架 state，三者不同步时，reset 就会变成“不可预测按钮”。
