type="reset" 按钮可原生重置表单至HTML初始属性值，但仅当所有控件（input/textarea/select）显式设置了value、checked、selected等属性才可靠；JS动态修改需同步更新DOM属性，否则reset失效。
怎么用 type="reset" 实现重填按钮
直接加 <input type="reset"> 就能生成一个点击后清空表单的按钮，浏览器原生支持，不用写 JS。它会把所有表单控件（<input>、<textarea></textarea>、<select></select>）恢复到页面加载时的初始值——注意，是「初始值」，不是空白。
常见错误现象：点完按钮没反应，或只清了一半。原因通常是：value 属性没写，或者用了 JS 动态改过初始值但没同步到 HTML 属性上。比如 <input value=""> 和 <input> 在 reset 行为上完全不同：前者会被清成空，后者可能保持用户输入过的值（取决于浏览器实现）。
- 必须显式设置
value、checked、selected等属性，才能被reset正确还原 -
<textarea>默认内容</textarea>的初始值是标签内文本，不是value属性 - 如果用 JS 初始化了表单（比如填充默认数据），记得同时更新对应元素的 HTML 属性，否则
reset会回退到空载状态，而非你期望的“默认状态”
为什么 reset 按钮经常不按预期清空
根本原因是：它不“清空”，而是“重置”——还原到 DOM 加载完成那一刻的属性快照。现代前端框架（React/Vue）或 JS 初始化逻辑常绕过 HTML 属性直操作 DOM，导致 reset 失效。
使用场景中容易忽略的一点：表单里混用了受控与非受控组件（比如 React 中部分 input 用 value + onChange，另一些没管），此时 reset 只影响 DOM 层，React 状态不变，界面看起来毫无反应。
立即学习“前端免费学习笔记（深入）”；
- 纯静态 HTML 表单中
reset最可靠；一旦有 JS 干预，就得手动同步初始状态 -
<form onreset="handleReset()"></form>可监听事件，但不能阻止默认行为（除非event.preventDefault()，那就得自己实现重置逻辑） - 某些浏览器对
date、datetime-local等类型 input 的 reset 行为不一致，建议测试目标环境
替代方案：用 JS 手动触发清空更可控
当需要清成「完全空白」，或初始值由 JS 计算而来，reset 就不够用了。这时候直接遍历表单元素设值更稳妥。
实操建议优先用 form.reset() 方法触发原生重置，再补漏；若彻底放弃原生逻辑，就用 querySelectorAll 遍历并逐个赋空值。
-
form.reset()是标准方法，兼容性好，但效果仍受限于初始属性是否准确 - 清空
<select multiple></select>要设element.selectedIndex = -1，不能只清value -
type="checkbox"和type="radio"必须操作checked属性，设value = ""没用 - 避免用
innerHTML = ""清表单——会销毁事件监听器和 Vue/React 绑定
要不要用 reset？看你的“初始值”从哪来
如果表单初始值写死在 HTML 里（比如登录页的 placeholder 或空 value=""），type="reset" 省事又可靠。如果初始值来自 API、URL 参数或用户上次填写缓存，那它大概率会把你“刚设好的默认值”一键打回原始空壳。
这时候所谓“重填”，其实是“回到上次打开时的状态”，不是“回到 HTML 初始状态”。这种需求必须用 JS 管理状态快照，并提供自定义重置函数——reset 按钮只是个 UI 壳子，背后得换掉逻辑。
最容易被忽略的细节：表单里嵌了自定义组件（比如日期选择器封装、富文本编辑器），它们根本不响应 reset，得单独调用其提供的清空方法。别指望一个按钮搞定全部。
