点 type="reset" 按钮后表单未清空，因其实际是回退到 HTML 加载时的初始状态（如 <input value="张三"> 重置后仍为“张三”），而非真正清空；它只认 value、checked、selected 等硬编码属性，忽略 placeholder 和 JS 动态设置的状态，且不触发 input/change 事件，导致框架状态与 DOM 脱节。
为什么点 type="reset" 按钮后表单没“清空”？
因为它根本不是清空，而是回退到 HTML 加载时的初始状态。比如 <input value="张三">，点重置后还是“张三”；而 <input>（没写 value）才会变为空。很多人误把 placeholder 当默认值，但 reset 完全不读它——只认 value、checked、selected 这些硬编码在 HTML 里的属性。
-
textarea的初始值是标签内的文本，不是value属性 -
checkbox和radio是否勾选，取决于 HTML 里是否写了checked，不是 JS 设置的.checked = true - 动态渲染的字段（如 JS 插入的
input）没有初始 HTML 属性，reset 对它们无效
React/Vue 里直接用 button type="reset" 会出什么问题？
视图和状态立刻脱节。比如 React 中 useState 管理的值不会随 DOM 重置而更新；Vue 的 v-model 也不会响应。用户看到输入框清空了，但组件内部 state 还是旧数据，后续提交就发错内容。
- 原生 reset 不触发
input或change事件，依赖这些事件的校验、联动逻辑全部失效 - 框架通常建议完全绕过原生 reset，改用
setState(initialValues)或formRef.resetFields()（如 Ant Design） - 如果非要保留按钮，必须手动监听
form.reset事件，并同步更新 state —— 但不如一开始就不用
怎么让重置按钮真正“按需清空”，而不是盲目回滚？
靠原生 reset 做不了这事。得用 JavaScript 控制：先保存要保留的字段值，再调用 form.reset()，最后把保留的值写回去。但更常见、更安全的做法是跳过 reset，直接遍历 form.elements 手动设值。
- 对文本类控件：
el.value = "" - 对
checkbox/radio：el.checked = false（或按需设为初始状态） - 对
select：el.selectedIndex = 0，或匹配某个option的value - 对自定义组件（如封装的日期选择器），必须调用其提供的清除方法，不能指望原生行为
要不要加确认弹窗？
要。浏览器不提供任何拦截机制，点了就不可逆。尤其当表单字段多、用户已填大量内容时，误点成本极高。原生 type="reset" 无法加 confirm，只能换方案：
立即学习“前端免费学习笔记（深入）”；
- 把按钮
type改成"button"，点击时先if (confirm("确定要清空所有填写？")) { ... } - 用更友好的 UI 替代，比如“撤销修改”按钮 + 时间戳提示“上次修改于 2 分钟前”
- 复杂表单建议禁用 reset 按钮，默认 disabled，仅当检测到字段变更后才启用
最常被忽略的一点：reset 按钮的语义是“回到初始快照”，不是“清空”。如果你的设计目标是后者，那就别用它——从一开始就不该把它放进用户-facing 的生产表单里。
