点击重置按钮后表单未清空，通常因button的type值误设为"button"而非"reset"；type="reset"必须在form内且控件需有name属性、非disabled状态才生效。
点击重置按钮后表单没清空？检查 type 值是不是写成了 "button"
html 重置按钮本质是表单控件，不是靠 js 绑定事件生效的。最常见问题就是把 <button type="button">重置</button> 当成重置按钮用——它根本不会触发任何表单重置行为。
正确做法只有两种：
-
<button type="reset">重置</button>（推荐，语义清晰，支持回车聚焦触发） -
<input type="reset" value="重置">（兼容性更好，但样式定制弱）
注意：type="reset" 必须在 <form></form> 内部才有效；如果按钮在表单外，或表单没有 name 或 id，它照样不工作。
重置后输入框变空，但 value 属性还在？这是预期行为，不是 bug
<input value="默认值"> 这类带内联 value 属性的元素，重置时恢复的是「初始值」，也就是 HTML 加载时的 value 字符串，而不是当前 DOM 的 value 属性值。
也就是说：用户改了输入框内容 → JS 修改了 input.value = "新内容" → 点重置 → 输入框显示为空（因为初始 value 是空字符串），但如果你查 input.getAttribute('value')，它还是原来的字符串。
立即学习“前端免费学习笔记（深入）”；
真正影响重置结果的，只有三件事：
- HTML 中写的
value、checked、selected等初始属性 - JS 是否在加载后调用过
input.defaultValue = ...（可改写初始值） - 浏览器是否对某些类型（如
date、file）做了特殊限制（比如file输入框重置后无法通过 JS 模拟选中）
用 JS 手动调用 form.reset() 时，为什么有些字段没被重置？
form.reset() 和点击 type="reset" 按钮效果一致，但它只重置「可提交的表单控件」，且要求这些控件满足两个条件：
- 必须有
name属性（否则不参与表单数据收集，也不被重置） - 不能是
disabled状态（禁用控件不重置，但readonly可以）
典型踩坑场景：
-
<input name="age" disabled>→ 调用form.reset()后值不变 -
<textarea name=""></textarea>→ 即使有内容，也不会被重置 -
<select multiple></select>多选下拉，重置只恢复初始选中项，不是清空所有选项
另外，自定义组件（比如用 div 模拟的开关）完全不在重置范围内，得自己监听 reset 事件手动处理。
想重置但又不想丢掉某些字段？别 hack reset()，换思路
HTML 原生重置机制不支持“部分重置”，硬要绕开（比如先保存再还原）容易出竞态或状态错乱。更稳妥的做法是放弃 type="reset"，改用普通按钮 + 显式赋值：
- 给需要保留的字段加
data-preserve="true"类名或属性 - 绑定点击事件，遍历表单内所有
input、select、textarea，跳过带data-preserve的，其余设为""、false或selectedIndex = 0 - 对
date、number等类型，注意设空字符串可能触发验证失败，优先用input.value = input.defaultValue
这方法可控性强，也避开了原生重置对 file、contenteditable 等非标准控件的无效问题。
重置逻辑看着简单，但实际涉及 HTML 初始化机制、DOM 属性与属性值的区别、表单控件状态模型三层耦合。最容易被忽略的，是那些没写 name 却以为“应该被重置”的字段。
