应优先使用，它更现代、可嵌套内容且样式可控；仅适用于极简场景；手动调用form.reset()易遗漏初始值逻辑和控件状态。
HTML中reset按钮必须用<input type="reset">还是<button type="reset"></button>
两者都能重置表单，但行为和可维护性差异明显。<button type="reset"></button>是更现代、更可控的选择，<input type="reset">仅适合极简场景。
常见错误现象：用<input type="button">绑定onclick手动调用form.reset()，结果表单未真正重置（比如<select></select>多选状态、checked初始值丢失、自定义校验状态残留）。
-
<button type="reset"></button>触发原生表单重置机制，会还原所有控件到初始HTML状态（包括value、checked、selected等属性值） -
<input type="reset">功能相同，但无法包裹内容（如图标+文字），且默认样式更难统一 - 手动调用
form.reset()需确保目标<form></form>存在且已渲染，否则报错TypeError: form.reset is not a function
为什么reset按钮不生效？检查这三处
不是代码写错了，而是表单结构或状态没对上。最常踩的坑都藏在DOM和初始值里。
- 表单元素没有
name属性——reset只重置有name的控件，<input name="email">可以，<input id="email">不行 - 初始值靠JavaScript动态设置（比如
input.value = "xxx"）——reset()只认HTML中写的value="xxx"，JS赋的值会被忽略 - 表单外的
<button type="reset"></button>没绑定form属性——必须加form="myForm"并匹配<form id="myForm"></form>，否则无效
reset对现代表单控件（如<input type="date">、<textarea></textarea>）是否可靠
基本可靠，但依赖浏览器对“初始值”的解释。某些控件的“初始”状态并不直观。
立即学习“前端免费学习笔记（深入）”；
-
<input type="date">：若HTML中没设value，重置后为空字符串；若写了value="2023-01-01"，重置回该值 -
<textarea></textarea>：初始值是标签体内容（<textarea>hello</textarea>），不是value属性，重置会恢复该文本 -
<input type="checkbox" checked>：重置后仍为勾选；若初始没checked，重置后一定不勾选——和JS操作checked = false效果不同 - 自定义Web Component或React/Vue控件：原生
reset通常不触发其内部重置逻辑，需额外监听reset事件并手动处理
要不要阻止默认reset行为再自定义重置逻辑
一般不用。除非你明确需要跳过某几个字段、保留用户输入过的搜索条件、或重置前弹确认框。
强行拦截再手写重置，容易漏掉隐藏字段、富文本编辑器状态、或<datalist></datalist>关联值。真要定制，优先用form.addEventListener("reset", e => { e.preventDefault(); /* 自定义逻辑 */ })。
- 阻止后必须手动调用
form.querySelectorAll("input, select, textarea").forEach(el => {...})逐个还原，工作量大且易出错 - Chrome 98+ 开始支持
form.reset({ keepScrollPosition: true })（目前仅草案），但尚未落地，别依赖 - 如果只是想清空但不还原初始值（比如清空搜索框但不清空筛选下拉），那就别用
type="reset"，改用普通按钮+form.querySelectorAll(...).forEach(el => el.value = "")
重置按钮真正的复杂点不在写法，而在“初始值”到底是谁定的——HTML源码？服务器模板？还是JS初始化脚本？搞错这一层，后面所有重置都会看似正常、实则失真。
