form.reset()提交后无效是因为页面跳转或刷新中断JS执行，需e.preventDefault()阻止默认行为并用setTimeout延迟重置；它仅还原HTML初始值而非清空，如重置后仍为"admin"。
form.reset() 为什么提交后调用没效果？
直接在 submit 事件里写 e.target.reset()，常发现输入框“闪一下又恢复”或根本没清空。这不是 bug，而是浏览器默认提交行为（跳转/刷新）会中断 JS 执行，或覆盖你刚设的 value = ""。尤其当 form.action 指向真实后端 URL 时，页面可能瞬间卸载，reset 来不及生效。
正确做法是用 setTimeout 把重置推到任务队列末尾：
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交，自己控制流程
fetch(form.action, { method: 'POST', body: new FormData(form) })
.then(() => {
setTimeout(() => form.reset(), 0); // 确保 DOM 更新完成后再重置
// 或：location.assign('/success'); // 如果走 PRG 重定向，这里不 reset
});
});
- 必须配合
e.preventDefault()，否则fetch和reset可能被忽略 -
setTimeout(..., 0)不是为了“延迟”，而是让 reset 躲开当前同步执行栈，等浏览器把响应渲染完再跑 - 如果服务端已返回 303 重定向，前端就别调
reset()—— 新页面本来就是干净的
跨表单场景下 reset() 为何只清空部分字段？
多个 <form></form> 共存时，form.reset() 只作用于调用它的那个表单实例。但更隐蔽的问题是：它只还原「HTML 初始值」，不是清空。比如 <input value="admin">，点 reset 会回到 "admin"，而不是空字符串。
常见漏掉的字段类型：
立即学习“前端免费学习笔记（深入）”；
-
<input type="file">：reset 无法清空已选文件，必须手动设el.value = ''或替换 DOM -
<textarea></textarea>：初始内容写在标签体内（<textarea>xxx</textarea>），reset 才会还原；若用 JS 动态写入，reset 无效 -
<select multiple></select>：只按 HTML 中的selected属性还原，JS 添加的选项不会被识别 - 自定义组件（如 Web Component 封装的输入框）：reset 完全不触发，需单独调用其内部清空方法
如何让 reset() 真正“清空”而非“还原”？
想统一清成空值，不能依赖 reset()，得手动遍历并设值。关键是分类型处理，且避开 defaultValue 的陷阱：
function clearForm(form) {
form.querySelectorAll('input, select, textarea').forEach(el => {
switch (el.type) {
case 'checkbox':
case 'radio':
el.checked = false;
break;
case 'file':
el.value = ''; // 实际无效，需 el.outerHTML = el.outerHTML
break;
case 'hidden': // 通常要保留，按需跳过
break;
default:
el.value = '';
}
});
// 重置 <select multiple> 的多选状态
form.querySelectorAll('select[multiple]').forEach(sel => {
Array.from(sel.options).forEach(opt => opt.selected = false);
});
}
-
el.value = ''对<input>和<textarea></textarea>有效，但对<select></select>必须操作options[i].selected -
<input type="file">设value = ''在多数浏览器中只是视觉清空，实际文件未释放；可靠做法是el.outerHTML = el.outerHTML - hidden 字段常含 token 或来源标识，清空可能导致后续提交失败，建议显式过滤
提交失败后怎么恢复用户刚填的内容？
用户填了一半提交报错，页面没跳转，但输入框被你 reset() 了——这是最伤体验的操作。此时不能靠 reset()，得在提交前快照状态：
- 监听
input事件（不是change），实时存el.name→el.value或el.checked - 对
<select multiple></select>，存Array.from(sel.selectedOptions).map(o => o.value) - 失败回调里，遍历快照对象，逐个赋值：
el.value = cached[el.name]，再手动触发input事件（如需更新框架状态） - 避免在
beforeunload里恢复数据 —— 此时 DOM 已冻结，赋值基本无效
真正的难点不在“怎么清”，而在“什么时候不该清”。跨表单、AJAX 提交、PRG 重定向、验证失败……每种路径的清理策略都不同。别迷信 reset()，它只是“还原快照”，不是“用户意图”。
