button[type="reset"]必须在form标签内或通过正确id的form属性绑定，且表单控件需有name且未disabled；reset()恢复html初始值而非清空，业务清空应手动赋值。

button[type="reset"]不在form内部

这是最常被忽略的结构性错误。浏览器只认「在同一个 <form></form> 标签下」的 button[type="reset"] 或 input[type="reset"]。如果按钮写在 <form></form> 外面，哪怕视觉上挨着，也完全无效。

更隐蔽的情况是：用了 form 属性显式绑定，但 ID 不匹配：

重置

• 检查按钮是否真正在 <form></form> 开闭标签之间
• 若用 form="xxx"，确保目标 <form id="xxx"></form> 存在且已渲染
• 表单嵌套在 <table>、<code><div> 里不影响，只要没跳出 <code><form></form>

  表单控件缺 name 属性或被 disabled

  form.reset() 和 type="reset" 按钮只对「有 name 且未 disabled」的原生控件生效。其他一概跳过——包括 <input id="email">、<input name="token" disabled>、自定义 Web Component。

  常见误判：

  • <input id="phone"> → 有 id 没 name，重置时被忽略
  • <select disabled><option value="1">A</option></select> → 即使有 name，disabled 状态下也不参与重置
  • <input type="hidden" name="csrf"> → 有 name，会被重置（还原 HTML 中的 value），但通常你并不想它变

  重置后值没变空，是因为它根本不是“清空”

  form.reset() 不是把所有字段设为空字符串，而是把每个字段「回退到页面加载时的 HTML 初始状态」。这个行为由 DOM attribute 决定，和 JS 修改过的 property 无关。

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  典型现象与原因：

  • <input value="北京"> → 重置后显示“北京”，不是空；因为 value 是 attribute，不是 JS 赋的 el.value
  • <textarea>请输入</textarea> → 重置恢复“请输入”，不是空字符串；初始值来自标签体内容
  • <input type="checkbox" checked> → 重置后仍勾选；checked 是布尔 attribute
  • <input type="file"> → reset() 无法清空已选文件，必须手动 el.value = ""

  如果你用 JS 动态设置过默认值（比如 el.value = "默认搜索词"），那 reset() 完全不认——它只看 HTML 里写的那个快照。

  需要真正“清空”时，别硬套 reset()

  业务上要的几乎都是「清空为初始空白态」，而不是「回到 HTML 写死的默认值」。这时候直接遍历赋值比绕弯子同步 defaultValue 更简单可靠。

  关键点：

  • input[type="text"]、textarea：设 el.value = ""
  • input[type="checkbox"]、input[type="radio"]：设 el.checked = false
  • select 单选：设 el.selectedIndex = -1；多选：遍历 el.options，逐个设 option.selected = false
  • 跳过 disabled 和 readonly 元素（它们本就不该被用户改）
  • 别依赖 new FormData(form) 验证结果——它会过滤掉 disabled、无 name、type="hidden" 字段，且不反映 checked 状态变化

  容易被忽略的是：重置逻辑若在 reset 事件回调里执行，需用 setTimeout(..., 0) 延迟——因为原生重置动作还没完成渲染，此时读 el.value 还是旧值，赋值会被立即覆盖。