最可靠方式是用普通按钮+JavaScript调用form.reset()；需确保操作对象为<form>元素而非<input>，并手动处理JS状态或框架数据以避免脱节。
点击按钮触发 reset() 方法最可靠
原生 <input type="reset"> 按钮确实能清空表单，但它的行为完全绑定在表单提交上下文中，且无法自定义逻辑。实际开发中更推荐用普通按钮 + JavaScript 调用 form.reset() —— 这样既能控制触发时机，又能兼容动态渲染、受控组件等场景。
常见错误是直接对单个 <input> 元素调用 reset()，这会报错：TypeError: input.reset is not a function。只有 <form> 元素才有该方法。
- 确保目标元素是
<form>，不是<input>或<div> - 用
document.querySelector('form')或给 form 加id后用document.getElementById()获取 - 绑定事件时别忘了
event.preventDefault()（如果按钮在 form 内且类型为submit）
document.getElementById('myForm').addEventListener('click', function(e) {
if (e.target.id === 'clearBtn') {
e.preventDefault(); // 防止意外提交
document.getElementById('myForm').reset();
}
});
reset() 不重置非表单控件和动态值
form.reset() 只还原初始 HTML 中设定的 value、checked、selected 等属性，对 JS 动态设置的 input.value = 'xxx' 或 React/Vue 的响应式数据无影响。这也是为什么“点了没反应”的常见原因。
典型场景：用户输入后你用 JS 更新了某个隐藏字段，或通过 input.addEventListener('input', ...) 实时同步了状态。这些都不会被 reset() 清除。
- 若需清空 JS 维护的状态，必须手动重置对应变量或调用状态管理函数
- 对于
contenteditable区域、div模拟输入框等非标准表单控件，reset()完全无效 - 使用
defaultValue属性可读取初始值，用于手动回滚（如input.value = input.defaultValue）
type="reset" 按钮的兼容性与样式限制
虽然语义清晰，但 <input type="reset"> 在不同浏览器中默认样式差异大，且无法直接用 CSS 设置 ::before/::after 伪元素；它也不能包含图标或复杂 HTML 结构。
更隐蔽的问题是：如果表单里没有其他可提交的按钮（比如只有 type="reset"），部分旧版 Safari 会禁用该按钮，点击无响应。
- 务必确保表单内至少有一个
type="submit"或显式设置了tabindex的交互元素 - 想统一视觉风格？改用
<button type="reset">—— 它支持全部 HTML 内容和 CSS 控制，且行为与input版本一致 - 注意：
<button type="reset">同样只对最近的父级<form>生效，嵌套 form 时要小心作用域
Vue/React 中不要依赖原生 reset()
在框架驱动的表单里，form.reset() 会把 DOM 值清空，但组件内部 state（如 Vue 的 data 或 React 的 useState）仍保持旧值，造成视图与数据不一致。用户再输入时可能触发意料外的副作用。
例如 React 中：用户输入后 setValue('abc')，此时调用 form.reset()，input 的 DOM 值变为空，但 value state 还是 'abc'，下次 onChange 触发时会覆盖 DOM 值。
- Vue 用户应调用
this.$refs.form.resetFields()（Element UI）或手动this.formData = {...initialData} - React 用户应避免直接操作 DOM，统一用
setValue(initialValues)或重置整个表单 state - 强行混合原生 reset 和框架状态管理，几乎必然导致脏数据或警告（如 React 的 "A component is changing an uncontrolled input to be controlled"）
