重置按钮不会清空表单，只恢复字段至HTML初始状态；常见失效原因包括按钮不在form内、未声明type="reset"、存在readonly/hidden字段或reset事件被preventDefault()拦截。
重置按钮不会“清空表单”，它只把字段值恢复到页面加载时的 HTML 初始状态——比如 value="默认用户名"、checked 属性是否存在、selected 是否写在 <option> 上。这点不搞清，后面所有行为都容易误判。
为什么点 <button type="reset"> 没反应？
最常见原因是结构或属性干扰了浏览器的重置路径：
-
<button>不在<form>标签内部，或者被包裹在<div>等容器里但没包住整个<form> -
<button>没写type="reset"，浏览器按规范默认为type="submit"，一点击就提交了 - 表单里有
input type="hidden"或带readonly的字段，它们本就不参与重置，不是 bug - JS 里监听了
reset事件并调用了event.preventDefault()，却没补任何逻辑，结果就是“点了但什么都没发生”
<input type="reset"> 和 <button type="reset"> 怎么选？
两者底层行为完全一致，区别只在语义和灵活性：
-
<input type="reset">只能靠value属性设文字，不能嵌套图标或 HTML 内容 -
<button type="reset">支持内联样式、<svg>、<span>，可访问性更好，推荐优先用 - 都不需要
name属性也能工作；加value（对input）或文本内容（对button）只是为了显示按钮文案
重置后某些字段没变回预期值，怎么回事？
因为重置逻辑只认 HTML 初始属性，不认 JS 动态赋的值：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 如果
<input value="abc">被 JS 改成input.value = "xyz"，点重置会回到"abc"，不是"xyz" -
<textarea>重置依据是其 HTML 中的文本内容（即textContent），不是value属性 -
<input type="checkbox">是否勾选，取决于初始 HTML 有没有checked属性，不是defaultChecked或 JS 设置的checked = true - 没写
value的<input>，重置后就是空字符串；没带selected的<option>，重置后不会被选中
现代项目里还该用原生重置按钮吗？
多数情况下不该——它的行为太隐晦，且和用户直觉冲突：
- 用户想“清空”，它却可能填回一堆默认值；用户改了几项，它却把全部打回原形
- 对 React/Vue 等框架的受控组件完全无效，
state不会同步，反而造成 DOM 与状态不一致 - 不触发
input或change事件，依赖这些事件做校验、日志、联动的逻辑会直接失效 - 没有确认机制，无法拦截、无法撤销，误点即丢失所有填写内容
真正可控的做法是：用 <button type="button"> + form.reset() + 手动同步 state 或特殊字段。重置这件事，表面是 DOM 操作，实际是状态管理问题——而原生 reset 做不了状态管理。
