最快但有陷阱：只重置为HTML初始值，不触发事件，不重置JS修改值；form.reset()更可控；手动重置需分类型处理；重置后需手动清理验证状态。
用 <input type="reset"> 最快但有陷阱
点击后自动把所有表单控件恢复到页面加载时的初始值，不需要写 JS。但注意：reset 不会触发 input 或 change 事件，也无法重置通过 JS 动态修改过的 value（比如用户输入后你又用 JS 改过一次），它只认 HTML 中写的 value 或 checked 等属性值。
常见错误：给 <input type="text" value="默认值"> 赋值后，用户改了内容，点 reset 又变回“默认值”——这其实是预期行为，不是 bug。
- 如果想重置成空值，HTML 中就别写
value属性，或显式设为value="" -
<textarea></textarea>同理，初始内容要写在标签体内，reset 才能清空：<textarea></textarea>→ 清空；<textarea>旧内容</textarea>→ 重置回“旧内容” -
<select multiple></select>和<input type="checkbox">都只按 HTML 中的selected/checked属性重置
用 form.reset() 方法更可控
JS 调用原生方法，效果和点击 type="reset" 按钮完全一致，但可以绑定在任意事件上（比如按钮、链接、快捷键），也方便加逻辑判断。
document.getElementById('myForm').reset();
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须在 DOM 加载完成后调用，否则找不到 form 元素
- 该方法不会阻止默认行为，也不抛错——哪怕 form 不存在，它只是静默失败
- 不重置自定义元素（如 Web Component 封装的输入框），只作用于原生表单控件
- 若表单里混用了
<input type="hidden">，它也会被重置，这点常被忽略
手动重置需要绕开 defaultValue 的坑
当你要把所有字段设为特定值（比如全清空、或统一设为“-”），不能只靠 el.value = ""，因为 <textarea></textarea> 和 <select></select> 的设置方式不同，且 defaultValue 属性在运行时不会自动更新。
正确做法是逐类型处理：
-
<input type="text|email|number">：设el.value = "" -
<textarea></textarea>：设el.value = ""（不是textContent） -
<select></select>：设el.selectedIndex = 0，或遍历options找到defaultSelected === true的项并选中 -
<input type="checkbox|radio">：设el.checked = false（注意：只影响当前元素，不批量操作） -
<input type="file">：只能设el.value = ""（实际无效），必须用el.outerHTML = el.outerHTML或新建 clone 替换
重置时要注意表单验证状态
reset() 不会清除浏览器自动添加的 :valid / :invalid 状态，也不会移除 setCustomValidity("") 后的校验结果。用户点完 reset，再立刻提交，可能仍看到红框或报错提示。
解决办法是重置后手动清理：
const form = document.getElementById('myForm');
form.reset();
// 清除所有控件的验证状态
form.querySelectorAll('input, select, textarea').forEach(el => {
el.setCustomValidity('');
el.reportValidity(); // 触发重新校验，让 UI 更新
});
注意：reportValidity() 会立即校验并显示提示，如果不想弹提示，可先 el.checkValidity() 再忽略返回值。
真正麻烦的是那些用了第三方校验库（如 Yup + Formik）或自定义 dirty 标记的场景——reset 只管 DOM，不管业务状态，这部分必须手动同步。
