直接调用 reset() 方法最简单但有陷阱：它只重置为页面加载时的初始值而非清空为“空”，且不触发 input 或 change 事件；真正可靠的清空需手动遍历所有输入节点并按类型分别处理，尤其注意 checkbox、radio 和 contenteditable 元素；在 Vue/React 中应优先更新 state 而非直接操作 DOM，避免视图与数据不一致。
直接调用 reset() 方法最简单但有陷阱
多数人第一反应是用表单元素的 reset() 方法，它确实能清空所有 <input>、<textarea></textarea>、<select></select> 的值。但注意：它只重置为页面加载时的初始值（value 属性或 selected 状态），不是清空为“空”。如果表单初始就带值（比如后端渲染了默认值），reset() 不会变成空字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅在表单初始无预设值时放心用：
document.querySelector('form').reset(); - 若需强制清空为
''、null或未选状态，必须手动遍历控制 -
reset()不触发input或change事件，依赖这些事件的校验逻辑不会响应
手动清空所有输入控件要覆盖全类型
真正可靠的清空需遍历所有可能的用户输入节点，并按类型分别处理。常见漏掉的是 type="checkbox"、type="radio" 和富文本 contenteditable 区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
querySelectorAll抓取全部可交互元素：form.querySelectorAll('input, textarea, select, [contenteditable]') - 对每种类型分别赋值：
input.value = ''、textarea.value = ''、select.selectedIndex = -1 -
checkbox和radio要设checked = false，不能只清value -
[contenteditable]清空用el.innerText = ''或el.innerHTML = ''（后者更彻底）
Vue/React 等框架里别直接操作 DOM
在响应式框架中硬调 reset() 或手动改 value，会导致视图与数据不一致——DOM 清了，但组件内部 state 还是旧值，下次 re-render 又刷回去。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue：重置对应 data 属性，例如
this.formData = { name: '', email: '' }，再加nextTick后调用el.reset()（仅用于同步原生验证状态） - React：用
useState或useReducer更新 state，必要时配合ref指向表单并调reset()辅助清理非受控字段 - 避免混合使用：不要一边 setState，一边又手动
input.value = ''，容易冲突
清空前是否该保留某些字段？
实际业务中常需保留部分字段，比如搜索表单里的分页参数 page、limit，或隐藏域 <input type="hidden"> 的 token。盲目全清可能破坏流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加白名单过滤：
el.matches('[name="page"], [name="token"], [type="hidden"]')就跳过 - 用
data-keep="true"自定义属性标记例外字段，遍历时检查el.hasAttribute('data-keep') - 隐藏域通常不需要用户输入，但若它参与提交逻辑，清空后可能引发 400 错误，务必确认后端是否允许为空
