type="reset"按钮不是清空按钮，而是还原字段到页面加载时的html初始值；常见失效原因有三：未嵌套在form内、控件缺value/checked/selected属性、button漏写type="reset"。
type="reset" 按钮不是“清空按钮”，它只还原字段到页面加载时的 HTML 初始值；多数“点了没反应”“清不干净”问题，都源于对这个行为的误解。
为什么 type="reset 按钮点击没反应？
最常见原因就三个，和结构或属性强相关：
-
input type="reset"或button[type="reset"]没写在<form></form>标签内部——它必须是表单的直接或嵌套后代，否则浏览器完全忽略 - 用了
<button></button>却漏写type="reset"，浏览器默认按type="submit"处理，一点就提交表单 - 表单控件本身没定义初始状态：比如
<input name="phone">没写value属性，重置后自然为空，但这不是“失效”，而是它本来就没有可还原的值
怎么让 type="reset 真正清成“空”？
靠显式声明初始值，而不是依赖“无属性即为空”的模糊逻辑：
- 所有文本类输入，写
value=""：<input name="email" value=""> -
<textarea></textarea>要清空，得写空标签：<textarea name="note"></textarea>（不要写<textarea value=""></textarea>，value属性对textarea无效） - 复选/单选框要默认不选，就别加
checked；如果已加，又想重置后不勾选，只能用 JS 手动设el.checked = false，注意checked="false"不起作用 - 动态插入的字段（如 JS
appendChild()添加的input）不会被重置，因为没有 HTML 初始快照
为什么重置后文件上传框还是有文件名？
这是浏览器安全限制，type="file" 输入框无法通过原生 reset 或 form.reset() 清空已选文件：
- 即使你写了
<input type="file" name="avatar">，点重置后它仍显示上次选择的文件名 - 唯一可靠方式是 JS 手动赋值：
fileInput.value = ''（注意不是fileInput.value = null） - 该操作必须放在
form.addEventListener('reset', ...)里，或绑定到自定义按钮 click 事件中 - 别指望
form.reset()自动帮你处理 file 字段——它根本不管
用 button 还是 input 写重置按钮？
优先用 <button type="reset"></button>：
-
<input type="reset">默认文案不可控（Chrome 显示“重置”，Firefox 可能是“重设”，旧 IE 是英文），且不支持::before/::after伪元素，字体继承也常错位 -
<button type="reset">清空</button>可自由写文案、加图标、套 CSS 类，样式完全可控 - 务必显式写
type="reset"，<button></button>在表单内默认是type="submit" - 某些 CSS 重置库（如 normalize.css）会重置
input[type="reset"]的边框/背景，而button更稳定
type="reset" 就会变成一个行为不可预测的开关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
