重置按钮回退到html初始状态而非清空；必须嵌套在form内，否则无效；reset不触发事件、不清除js修改值、无法清空file输入；框架中需手动同步状态。
重置按钮不是“清空”，而是“回退到页面加载时的 HTML 初始状态”——这点不搞清，后面所有操作都会出偏差。
为什么 <input type="reset"> 点了没反应
最常见原因是它没被包在 <form></form> 标签内。浏览器只认“表单后代节点”里的 reset 按钮，<form></form>
<input type="reset"> 这种写法完全无效。
- 必须确保
<input type="reset">或<button type="reset"></button>是某个<form></form>的直接或嵌套子元素 - 多个
<form></form>嵌套时，按钮只作用于离它最近的父<form></form> - 如果用 JS 动态插入表单内容，要确认插入后 DOM 结构仍是合法嵌套（比如没漏掉闭合标签）
-
<button></button>默认是type="submit"，漏写type="reset"就会误提交
type="reset" 和 form.reset() 行为完全一致
两者底层调用同一套逻辑：还原所有原生表单控件的初始值（value、checked、selected、<textarea></textarea> 内容等），但不会触发 input 或 change 事件，也不清空 JS 动态改过的值。
-
<input value="张三">→ 用户改成“李四” → reset 后变回“张三” -
<input>（无value属性）→ reset 后为空字符串 -
<textarea>旧内容</textarea>→ reset 后仍为“旧内容”；<textarea></textarea>→ reset 后为空 -
<input type="file">无法通过 reset 清空已选文件（浏览器安全限制） - 调用
form.reset()前必须确保 DOM 已就绪，否则静默失败
想真正“清空”而不是“还原”，得用 JavaScript 手动处理
当需要把字段设为空、取消所有勾选、重置下拉框、甚至清掉文件输入框时，type="reset" 和 form.reset() 都做不到，必须逐类型操作：
-
<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或替换克隆节点
框架（Vue/React）里千万别直接依赖原生 reset
原生 reset 只改 DOM，不更新响应式数据，会导致视图和状态错位。比如 Vue 的 v-model 值不变，但 input 的 value 被 reset 回去了；React 的 useState 也一样。
- 监听
reset事件，在 handler 中手动同步 state 或 ref - 更稳妥的做法：放弃原生 reset，用自定义按钮 + 显式赋值（如
setValue(initialValue)） - 某些 UI 库（如 Ant Design）的表单组件会接管 reset 行为，此时原生按钮无效，得调用库提供的
resetFields()方法
重置逻辑最易被忽略的一点：它不区分“用户填的”和“JS 填的”，只认 HTML 初始属性。如果你动态渲染表单、用 JS 注入默认值、或依赖 placeholder 当默认文本，reset 就会表现异常——这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
