button type="reset"仅重置form内有name属性、非readonly的可交互控件（input除hidden外、textarea、select），恢复为初始HTML中设定的value/checked/selected值，不响应JS动态修改或触发input/change事件。

button type="reset" 会清空哪些表单字段

它只重置 <form></form> 内、有 name 属性且非只读（readonly）的可交互控件，包括：<input>（除 type="hidden" 外）、<textarea></textarea>、<select></select>。没有 name 的字段（比如仅靠 id 识别的 <input>）不会被重置。

常见误区是以为它会还原 JavaScript 动态修改过的值——不会。type="reset" 只恢复到页面初始加载时的 value、checked、selected 状态，不是上次 submit 后的状态，也不是 JS 设置后的状态。

为什么点击后表单没反应或部分字段没清空

• button 不在 <form></form> 标签内，或未通过 form 属性显式关联（如 form="myForm"），则重置逻辑不触发
• <input type="hidden"> 和 <input readonly> 被跳过，这是浏览器标准行为，不是 bug
• 如果表单初始 HTML 中某个 <input> 没写 value，那重置后就是空字符串；但若写了 value="abc"，哪怕 JS 改成 "xyz"，重置仍回 "abc"
• 自定义组件（如用 div 模拟的下拉框）完全不受影响——它们不在原生表单控制链中

和 input type="reset" 有什么实际区别

行为完全一致：都触发表单的 reset 事件，并执行相同重置逻辑。差异只在语义和可控性上：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• <input type="reset"> 是替换型控件，内容只能是纯文本，无法嵌套图标或复杂 HTML
• <button type="reset"></button> 支持富内容：可放 <svg></svg>、<span></span>、甚至简单样式，更适合现代 UI
• 两者都会触发 form.reset() 方法，也会冒泡 reset 事件，监听方式无区别
• 注意：如果同时存在多个 type="reset" 元素，任一点击都重置整个表单，不存在“局部重置”

想重置但又不想丢掉某些字段怎么办

原生 type="reset" 不支持选择性重置。必须绕开它，用 JavaScript 手动控制：

立即学习“前端免费学习笔记（深入）”；

• 移除 type="reset"，改用 type="button" 并绑定 click 事件
• 调用 form.reset() 后立即手动恢复关键字段，例如：

  document.querySelector('button').addEventListener('click', () => {
    form.reset();
    document.getElementById('timestamp').value = Date.now(); // 恢复时间戳
  });

• 更稳妥的做法是不依赖初始值，改用 data-* 属性存默认值，比如 <input data-default="default@mail.com">，重置时读取并赋值
• 如果表单由框架（React/Vue）驱动，别用 type="reset"——它会破坏受控组件状态，直接用 state 重置更可靠

真正容易被忽略的是：表单重置不触发 input 或 change 事件，所以依赖这些事件做校验或同步的逻辑，在 reset 后可能失效，得额外补一手。