button type="reset"将表单控件的value、checked、selected属性恢复为HTML中定义的初始值，而非清空；不重置placeholder、JS动态设置的值、disabled/无name字段、自定义组件及动态插入的DOM。
button type="reset"到底清空什么
它不“清空”，而是把每个表单控件的 value、checked、selected 属性，强行设回页面加载时 HTML 中写死的初始状态。比如：<input value="张三"> 点重置后还是“张三”；<input>（没写 value）才会变为空字符串。
常见误解是 placeholder 或 JS 动态赋的值会被还原——不会。placeholder 不参与重置；el.value = "新内容" 这类 JS 修改也不会被覆盖，但 reset 会忽略它，只认原始 HTML 属性。
-
<textarea>请输入</textarea>→ 重置后显示“请输入”，不是空 -
<input type="checkbox" checked>→ 初始勾选，重置后仍勾选 -
<select><option selected>北京</option></select>→ 重置后仍选中“北京” -
<input type="file">→ 浏览器安全限制，reset() 无法清空已选文件，必须手动设el.value = ""
为什么点了 button type="reset" 表单没反应
大概率不是代码写错，而是 DOM 结构或控件状态不匹配。浏览器只对「在 <form> 内、有 name、且未 disabled」的原生控件生效。
- 按钮不在
<form>标签内部（哪怕只差一层<div>包裹，部分浏览器就失效） - 表单里全是
disabled或display: none的字段，reset 行为静默无提示 -
<input>缺name属性 —— 原生 reset 忽略它，哪怕 visible 且 enabled - 用了自定义组件（如封装的日期选择器、富文本编辑器），它们不响应原生 reset，需手动监听
reset事件并同步内部状态
form.reset() 和 button type="reset" 的行为差异
底层逻辑一致，但触发路径和可干预性完全不同：
立即学习“前端免费学习笔记（深入）”；
-
button type="reset"是用户点击触发，会冒泡、能被form.addEventListener('reset', e => e.preventDefault())拦截（注意：不是监听按钮 click） -
form.reset()是 JS 调用，不触发 click，但会触发reset事件（所以监听 form 的 reset 事件仍能捕获） - 两者都**不触发
input或change事件**，依赖这些事件的校验、联动逻辑全部中断 -
form.reset()对动态插入的 DOM（如 JS append 的<input>）无效，而button type="reset"同样无效——因为那些元素没有初始 HTML 属性
React/Vue 里直接用 button type="reset" 会出什么问题
视图和状态立刻脱节。DOM 看似清空了，但组件内部 state 还是旧值，后续提交发出去的就是错数据。
- React 中
useState管理的值不会随 DOM 重置自动更新 - Vue 的
v-model不响应原生 reset，input事件没触发，绑定的数据不动 - UI 库（如 Ant Design）的
Form组件通常接管 reset 行为，原生button type="reset"可能被完全忽略 - 真要保留重置语义，得用库提供的方法（如
formRef.resetFields()），或手动调用setState(initialValues)
真正麻烦的不是怎么写 button，而是判断哪些字段该还原、哪些该保留、哪些根本没初始值——这些边界情况不处理，用户点完“重置”反而更困惑。
