reset按钮最简单但仅还原HTML初始值；必须置于<form>内，不触发change事件，对JS修改值、受控组件及第三方控件无效，需手动遍历清空或走框架响应式重置。
用 reset 按钮最简单，但要注意表单结构
原生 HTML 就支持一键清空，不用写 JS：把按钮的 type 设为 reset，它会把整个 <form> 内所有可重置控件（input、textarea、select）恢复成初始值（即 value 或 selected 的初始状态）。
常见错误是按钮没放在 <form> 标签内，或表单里用了 value 动态赋值（比如 JS 设置过），此时 reset 仍按 HTML 初始值清，不是当前显示值。
- 确保按钮在
<form>开闭标签之间 - 初始值要写在 HTML 属性里，比如
<input value="默认文本">，而不是靠 JS 后设 -
reset不触发change或input事件，监听这些事件的逻辑不会自动响应
需要清空“当前所有内容”（不管初始值）就得用 JS
当表单字段被用户修改过、又用 JS 改过 value，或者用了自定义组件（如富文本框、日期选择器插件），reset 就失效了。这时得手动遍历并清空。
核心思路：选中表单内所有可编辑元素，统一设为空字符串或对应初始状态（如 select 设为第一个选项，checkbox/radio 清除勾选）。
立即学习“前端免费学习笔记（深入）”；
- 用
form.querySelectorAll('input, textarea, select')获取全部控件 - 对每个元素判断类型：
type === 'checkbox'或'radio'就设checked = false；tagName === 'SELECT'就设selectedIndex = 0；其余设value = '' - 注意
textarea要清的是textContent或value（两者在此场景等效），别漏掉
document.querySelector('#myForm button.clear').addEventListener('click', () => {
const form = document.getElementById('myForm');
form.querySelectorAll('input, textarea, select').forEach(el => {
if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = false;
} else if (el.tagName === 'SELECT') {
el.selectedIndex = 0;
} else {
el.value = '';
}
});
});
遇到富文本框、日期组件等第三方控件怎么办
这类控件往往不直接暴露 input 元素，而是封装在 div 或自定义标签里，原生清空逻辑完全无效。
必须查对应库的 API：比如 tinymce 要调 tinymce.get('id').setContent('')；flatpickr 要调 instance.clear()；Element Plus 的 el-date-picker 需绑定 v-model 并设为 null 或空字符串。
- 不能只清底层隐藏
input，界面不会同步更新 - 如果用了 Vue/React，优先走响应式数据重置（如
formModel = {...initialModel}），比操作 DOM 更可靠 - 清空前最好先保存原始初始值（比如页面加载时缓存一份），避免每次都要硬编码
为什么 reset() 方法有时不生效
调用 form.reset() 是 JS 版的重置，但它和 type="reset" 按钮一样，只还原 HTML 初始值，且有严格前提：
- 表单必须有
name属性，否则部分浏览器（特别是旧版 Safari）可能忽略 - 动态添加的字段（如 JS 插入的
input）若没在初始 HTML 中声明，reset()不会管它们 - 设置了
disabled或readonly的字段，reset()会跳过，不会清除其值 - 在 Vue 中直接调
form.reset()可能破坏响应式，建议改用数据重置
真正难处理的从来不是“怎么清”，而是“清成什么样”——初始值是否合理、第三方组件是否可控、清空后要不要保留某些字段（比如 ID 不该动），这些得根据具体业务定。
