重置按钮没清空value或checked，是因为它只恢复到HTML初始状态而非清空；若HTML中写了value="张三"或checked，则重置后仍为“张三”或勾选，JS修改的property不会被reset()覆盖。
重置按钮为什么没清空 value 或 checked 状态？
HTML 表单的 <input type="reset"> 按钮只恢复表单控件到其**初始 HTML 状态**，不是清空为“空值”。如果 <input value="张三"> 是写死在 HTML 里的，点击重置后它会回到 “张三”，而不是空字符串；同理，checked、selected 属性若在 HTML 中存在，也会被恢复，而非清除。
常见错误现象：
– 输入框原本没设 value，但 JS 动态赋了值，重置后值还在
– 单选/复选框用 JS 设置了 checked = true，重置后仍保持勾选
– <select> 通过 JS 改了 selectedIndex，重置不生效
- 解决思路：要么在 HTML 中显式设初始为空（如
<input value="">），要么放弃原生重置，用 JS 手动控制 - 注意：动态渲染的表单（如 React/Vue）根本不会响应原生
reset，因为 DOM 初始状态和框架 state 已脱钩
form.reset() 和点击 <input type="reset"> 的行为差异
两者触发的是同一套浏览器逻辑：都调用表单的 reset() 方法，效果完全一致。区别仅在于触发方式——一个由 JS 调用，一个由用户点击。但关键点在于：reset() 不会触发 input 或 change 事件，也不会更新绑定的 JS 变量（比如你用 document.getElementById("name").value 读出来的值虽变了，但如果这个值被存进某个对象或闭包变量里，那个变量不会自动同步）。
- 使用场景：适合纯静态表单、无 JS 状态管理、且所有初始值都明确写在 HTML 中的情况
- 兼容性：所有现代浏览器支持，无风险
- 性能影响：极小，纯 DOM 层操作，不涉及 layout/reflow
手动清空表单时如何正确处理不同控件类型
JS 手动清空必须按控件类型分别处理，不能统一设 .value = ""：
立即学习“前端免费学习笔记（深入）”；
-
<input type="text|email|number">、<textarea>：设.value = "" -
<input type="checkbox"|radio>：设.checked = false（注意：radio 组要遍历全部，不能只清当前选中的） -
<select>：设.selectedIndex = -1（多选需遍历options并设.selected = false） -
<input type="file">：只能设.value = ""（部分浏览器可能无效，更可靠是.replaceChildren()或重建 input 元素）
示例片段：
function clearForm(form) {
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
switch (el.type) {
case 'checkbox':
case 'radio':
el.checked = false;
break;
case 'file':
el.value = '';
break;
case 'select-multiple':
Array.from(el.options).forEach(opt => opt.selected = false);
break;
default:
el.value = '';
}
});
}
重置后表单验证状态未清除怎么办？
HTML5 表单验证（required、pattern 等）的状态（如 :valid、:invalid 伪类，以及 checkValidity() 返回值）会在 reset() 后重置，但某些浏览器对自定义验证（setCustomValidity()）不会自动清空——如果你之前调用过 el.setCustomValidity("错误")，重置后该错误消息依然存在，导致 el.checkValidity() 返回 false，即使值已为空。
- 解决方法：重置后手动调用
el.setCustomValidity("")清除自定义错误 - 容易忽略的点：表单内嵌的 Web Component 或第三方 UI 库（如 Element Plus 的
<el-input>）通常有自己的内部状态，原生 reset 对它们完全无效
复杂点在于：真实业务表单往往混合了原生控件、JS 管理的状态、第三方组件、异步校验缓存。这时候“重置”不再是单一动作，而是一组协同清理操作——光靠 form.reset() 或简单遍历 DOM，大概率漏掉某一层状态。
