type="reset"按钮仅恢复字段初始值，需预设value/checked；JavaScript手动清空更可控，须遍历处理checkbox、radio、select等；form.reset()对无name或disabled字段无效，Shadow DOM及富文本组件需额外处理。
用 type="reset" 按钮最简单，但要注意它只清空初始值
直接给 <button type="reset"> 就能一键清空表单——前提是表单里每个字段都设置了初始值（比如 <input value="默认值">）。它不是清空“当前输入”，而是把所有字段恢复成页面加载时的 value 或 checked 状态。
常见错误是：表单字段没设 value，比如 <input> 空标签，点重置后什么也不变；或者用了 JavaScript 动态填值，reset 不会管这些改动。
- 适合场景：纯静态表单、字段初始值明确、不依赖 JS 填充
- 兼容性好，所有浏览器都支持
- 不会触发
input或change事件，某些校验逻辑可能失效
用 JavaScript 手动清空更可控，但得遍历字段
如果表单有动态内容、带默认提示文字（placeholder）、或用了 contenteditable 元素，reset 就不够用了。这时得写脚本，手动设 value、checked、selected 等属性。
关键点：不能只清 value，还得处理复选框、单选组、<select>、<textarea>，甚至富文本容器。
立即学习“前端免费学习笔记（深入）”；
-
document.querySelectorAll('input, select, textarea')获取全部可编辑字段 - 对
type="checkbox"和type="radio"，设element.checked = false - 对
<select multiple>，需遍历options并设option.selected = false - 避免直接赋
""给innerHTML，可能破坏结构；改用textContent = ""或清空value
注意 reset 和 form.reset() 的行为差异
<button type="reset"> 触发的是表单原生重置流程；而调用 form.reset() 方法效果一样，但可以加条件判断或前置逻辑。
容易踩的坑：form.reset() 在没有 name 属性的字段上无效（HTML 表单规范要求可提交字段必须有 name），而且它不会清空 disabled 字段的值——即使你之前用 JS 解除了禁用，只要重置前它是 disabled，值就不会被还原。
- 如果字段临时
disabled后又被启用，想清空它，得先确保重置前是启用状态 -
form.reset()不会触发submit事件，但会触发reset事件，可用于监听 - 在 Shadow DOM 中，
form.reset()可能不生效，需手动遍历内部节点
清空富文本或自定义组件需要额外处理
像 contenteditable="true" 的 <div>、第三方编辑器（如 TinyMCE、Quill）或封装的 UI 组件（Ant Design 的 Input.TextArea），reset 完全无效。
这类情况必须走组件 API 或 DOM 操作：查文档找清空方法（如 editor.setContent("")），或手动移除子节点 + 清空 textContent。
- 不要依赖
innerHTML = ""，可能丢失事件监听器或破坏框架绑定 - 若组件提供
ref或实例引用，优先调用其clear()、reset()方法 - 对
contenteditable元素，设element.textContent = ""比innerHTML更安全
真正麻烦的从来不是按钮本身，而是表单里混进去的那些“看起来像输入框、其实不是标准表单控件”的东西。
