reset()不生效是因为它只恢复HTML初始值，不处理JS动态设置的值；需确保初始值仅通过属性声明，重置前手动还原状态，并注意框架中DOM与数据不同步问题。
点击重置按钮后表单没清空，为什么 reset() 不生效
常见原因是表单里用了 value 属性硬编码初始值，或者 JS 动态设置了 input.value。浏览器的 reset() 只会恢复到 HTML 中定义的初始状态，不是清空当前值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保所有
<input>、<textarea>、<select>的初始值只通过value、checked、selected等属性声明，不要用 JS 赋值覆盖 - 如果必须用 JS 初始化（比如从 localStorage 读取），重置前先调用
form.reset()，再手动还原初始状态，而不是依赖它自动回滚 JS 修改 - 检查是否有
disabled或readonly字段——它们会被重置，但用户不可编辑，容易误判“没清空”
<button type="reset"> 和 form.reset() 行为不一致
两者底层逻辑相同，但触发时机和上下文有差异：type="reset" 按钮会触发 reset 事件，而 JS 调用 form.reset() 不会——这点对监听重置行为的代码很关键。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要在重置前拦截或清理副作用（如清除验证提示、关闭弹窗），优先监听
reset事件，而不是绑定到按钮 click - 若用 JS 调用
form.reset()，需手动触发事件：form.dispatchEvent(new Event('reset', { cancelable: true })) -
type="reset"按钮在某些旧版 Safari 中可能不触发reset事件，建议始终加一层事件监听兜底
带默认值的 <input type="date"> 重置后显示为空白
这是规范行为：HTML5 表单控件（如 date、time、number）的 reset() 会恢复到空字符串，而非初始 value 值。即使写了 <input type="date" value="2024-01-01">，重置后也变成空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想让重置后回到指定日期，不能依赖原生 reset，改用 JS 手动赋值：
input.value = '2024-01-01' - 注意
input.valueAsDate在部分浏览器中对空值返回null，直接读写value字符串更可靠 - 若表单含多个日期控件，建议封装一个
restoreDefaults()函数统一处理，避免散落的重置逻辑
Vue/React 项目里 v-model 或受控组件重置失效
框架接管了表单状态，原生 reset() 只改 DOM，不更新组件 data/state，导致视图不同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue 中不要混用
v-model和原生reset；要么用@click="form.reset(); formData = {...initialData}"，要么完全放弃type="reset"，只用 JS 同步 state 和 DOM - React 中同理，
useRef拿到 form 元素后调用reset()是无效的，必须同步修改useState或useReducer的值 - 若用 Formik、react-hook-form 等库，直接调用
resetForm()或reset()方法，它们内部已处理双向同步
