HTML重置按钮不“清空”而只“还原”到页面加载时的HTML属性值（如value、checked、selected），无视JS修改的property；它仅作用于有name且未disabled的原生表单控件，对动态渲染或受控组件无效。
HTML重置按钮不“清空”，它只“还原”——还原到页面加载那一刻 DOM 元素的 value、checked、selected 等 HTML 属性值，JS 后续改过的任何状态它都无视。
reset 按钮只认 HTML 初始属性，不认 JS 修改的值
这是最常踩的坑：你用 JS 写了 input.value = "新用户名"，点 <input type="reset">，结果输入框变空或回到 value="默认名"，而不是你 JS 设的值。
-
reset行为读取的是元素的 HTML attribute（比如<input value="初始值">），不是 JS property（el.value） - 验证方式：
el.getAttribute('value')返回 HTML 里写的值；el.value返回当前 JS 值；两者经常不一致 -
<textarea>初始文本</textarea>的初始值是标签体文本，不是value属性，reset会恢复它；但如果你没写内容，reset后就是空 -
<input type="checkbox" checked>重置后一定勾选；<input type="checkbox">重置后一定不勾选——和 JS 执行el.checked = false效果不同
哪些字段会被 reset，哪些不会？
reset 不是“全表单无差别清空”，它有明确的筛选逻辑：
- ✅ 会被重置：
<input name="email" value="user@example.com">、<select name="city"><option selected>上海</option></select>、<textarea name="note">初始备注</textarea> - ❌ 不会被重置：
<input id="token">（缺name）、<input name="dynamic" value="">+ JS 后续设el.value = "abc"、<div contenteditable>、自定义 Web Component 或 React/Vue 受控组件 - ⚠️ 特殊情况：
<input type="date">若 HTML 未设value，重置后为空字符串；若写了value="2026-07-01"，就回那个日期
form.reset() 和 <input type="reset"> 一样吗？
底层逻辑一致，但触发时机和可控性不同：
立即学习“前端免费学习笔记（深入）”；
- 两者都调用原生重置机制，都忽略 JS 对
defaultValue的修改，都只还原 HTML 初始状态 -
<input type="reset">自动绑定所在<form>，点击即触发，无法拦截（除非在click阶段preventDefault()，但会同时取消重置） -
form.reset()是 JS 方法，可加条件判断、弹确认框、或延迟执行；但必须确保form已渲染且存在，否则报TypeError: form.reset is not a function - 如果表单在 Shadow DOM 里，
reset不穿透边界，子组件状态不会被影响
为什么 reset 按钮点了没反应？三处必查
不是代码写错了，而是 DOM 结构或初始状态没对上：
- 表单控件没写
name属性——reset只处理有name的元素 -
<button type="reset">放在<form>外面，又没加form="myForm"属性匹配<form id="myForm"> - JS 绑了
onclick="return false"或在事件监听里调了event.preventDefault()，直接阻断了默认重置行为
真正麻烦的从来不是怎么加按钮，而是你得想清楚：用户点这个按钮时，ta 期待的是“回到我刚打开页面的样子”，还是“把所有东西都删干净”——前者用原生 reset，后者得自己写逻辑，而且要同步 DOM 和 JS 状态，漏掉任何一个 checkbox 或 textarea.textContent，都会出 bug。
