reset 类型的 本质是将表单控件恢复到页面加载时的初始状态（value、checked、selected 等），而非设为指定值；它仅在 内部有效，触发 reset 事件且可被 preventDefault() 阻止，但无法执行自定义逻辑，现代框架中基本被 JS 控制替代。
reset 类型的
它不是“重置成某个指定值”，而是把每个表单元素恢复到页面加载时的 value、checked、selected 等状态。如果没显式设置初始值，就清空或回到未选中状态。
常见误解是以为它能执行自定义逻辑（比如清空后弹个提示），但原生 type="reset" 不触发 JS 事件监听以外的任何行为——它只做一件事：还原。
- 对
：恢复value属性值；若无value，则清空 - 对
或：仅还原checked属性初始状态（注意：不是defaultChecked，是 HTML 解析时的属性存在与否） - 对
：还原第一个，或无selected时选中第一个 - 不重置通过 JS 动态修改的
value或checked，除非这些修改也同步改了对应属性（如el.setAttribute('value', '...')）
必须放在
type="reset" 按钮只有作为 的子元素时，浏览器才会自动绑定重置逻辑。脱离表单时点击无任何效果，控制台也不会报错，容易误以为代码写错了。
正确写法：
立即学习“前端免费学习笔记（深入）”；
错误写法（独立于 form）：
- 不能靠
form="form-id"属性跨域绑定（该属性只对提交类按钮如submit有效） - 如果用 JavaScript 手动调用
form.reset()，那按钮可以放 anywhere，但此时已和type="reset"无关
与 form.reset() 的行为差异容易被忽略
直接调用 form.reset() 方法和点击 type="reset" 按钮，在绝大多数场景下表现一致，但有一个关键区别：
- 点击
会触发reset事件，且该事件可被event.preventDefault()阻止 -
form.reset()调用也会触发reset事件，同样可阻止 - 但
form.reset()在表单无时仍可用；而按钮没有就彻底失效 - 某些老版本 Safari 对
reset事件冒泡处理异常，建议监听在上而非按钮本身
如果需要拦截并自定义重置逻辑（比如确认弹窗、日志记录），必须监听 reset 事件并 preventDefault，再手动设置各字段：
document.getElementById('myForm').addEventListener('reset', function(e) {
e.preventDefault();
if (!confirm('确定要重置？')) return;
this.reset(); // 手动触发原生逻辑
});现代项目中更推荐用 JS 控制重置逻辑
因为原生 reset 行为太“刚性”：无法跳过某些字段、无法保留部分输入、无法兼容受控组件（如 React 中的 value={this.state.xxx}）。一旦用了框架或复杂状态管理，type="reset" 基本就失效了。
- React/Vue/Angular 中，一律用按钮绑定 click 事件 + setState / data 更新
- 纯 JS 场景下，若需兼容旧浏览器且逻辑简单，
type="reset"仍可快速使用 - 注意：Chrome 98+ 开始，
reset事件不再冒泡到document，只能监听在或其祖先节点上 - 无障碍方面：
type="reset"按钮默认有语义，比更利于屏幕阅读器识别
真正麻烦的从来不是怎么写这个按钮，而是搞清它到底“重置什么”以及“什么时候不重置”。
