type="reset" 清不掉 hidden 字段，因为规范规定 reset 仅重置有初始值且可交互的控件，而 hidden 输入框无用户交互态，重置时被浏览器忽略；需手动清空，如 document.querySelectorAll('input[type="hidden"]').forEach(el => el.value = "")。
type="reset" 为什么清不掉 hidden 字段
因为 form.reset() 和 <input type="reset"> 只重置“可提交的、有初始 HTML 属性值”的控件，而 <input type="hidden"> 虽然可提交，但它的重置行为被浏览器忽略——既不读取也不恢复其 value 属性。这不是 bug，是规范定义：hidden 输入框没有用户交互态，reset 机制默认跳过它。
手动清空 hidden 字段的三种可靠方式
必须显式操作 DOM，不能依赖 reset。常见做法有：
- 用
document.querySelectorAll('input[type="hidden"]')获取所有 hidden 元素，逐个设el.value = "" - 若用 jQuery，
$('input[type="hidden"]').val("")即可（注意不是.attr("value", "")，后者只改 attribute，不触发 value property 更新） - 更稳妥的做法是遍历
form.elements，对每个元素判断el.type === "hidden"再赋空值，避免漏掉动态插入或 name 缺失的 hidden 字段
hidden 字段清空后仍残留数据？检查这些点
清空了但后端还能收到旧值，通常不是 JS 没执行，而是以下原因：
- hidden 字段的
name属性缺失，导致它根本不参与表单序列化，但 JS 清空逻辑可能误把它当普通 input 处理 - hidden 字段被 JS 动态生成且未 append 到
<form>内，form.elements查不到，自然不会被遍历到 - 框架（如 Vue/React）中 hidden 字段绑定了响应式数据，JS 清 DOM 值但没同步更新 state，提交时仍发旧值
- 某些 UI 库（如 Element Plus）把 hidden 字段封装在自定义组件里，实际 DOM 中并不存在
input[type="hidden"]，得调用组件 API 清除
要不要用 text + display: none 替代 hidden
不推荐。虽然 <input type="text" style="display:none" value="xxx"> 能被 reset 清掉，但语义错误、可访问性差，且 screen reader 仍会朗读该字段。真正需要隐藏又需 reset 支持的场景极少，绝大多数时候直接 JS 手动清空更可控、更符合现代开发习惯。
立即学习“前端免费学习笔记（深入）”；
