HTML按钮触发表单重置需使用<input type="reset">或<button type="reset">且必须置于<form>内部；点击后仅还原HTML初始值（如value、checked属性），不清空JS动态修改的值，也不影响框架受控组件状态。
HTML按钮怎么触发表单重置？
只有 <input type="reset"> 或 <button type="reset"> 放在 <form> 内部时，点击才会清空表单控件的当前值（不是默认值），并触发 reset 事件。单独写 reset 属性没用——HTML 元素没有叫 reset 的属性。
为什么点了按钮表单没清空？
常见原因有三个：
-
<button>没加type="reset"，默认是type="submit"，会提交表单而非重置 - 按钮不在
<form>标签内部，或被嵌套在其他表单之外的容器里（比如<div>包着但没包住<form>） - 表单里用了 JavaScript 手动修改过
value或checked等属性，而原生 reset 不会还原这些 JS 修改，只恢复初始 HTML 状态
reset 和 JavaScript 的 form.reset() 有什么区别？
行为一致，但触发方式不同：
-
<button type="reset">是用户点击触发，会冒泡、可被event.preventDefault()阻止 -
form.reset()是 JS 调用，不会触发click事件，但会触发reset事件（监听form.addEventListener('reset', ...)能捕获） - 两者都只还原到页面加载时的初始值（即 HTML 中写的
value="xxx"、checked、selected等），不关心后续 JS 设置的值
自定义重置逻辑时要注意什么？
如果需要清空 JS 动态填入的内容（比如通过 input.value = 'xxx' 设置的），必须手动处理：
立即学习“前端免费学习笔记（深入）”；
- 不能只依赖原生 reset，得监听
reset事件后补充清理逻辑 - 例如：富文本编辑器、日期选择器插件、自定义 checkbox 组合，它们的 UI 状态和 DOM 值常不一致
- 若用框架（React/Vue），表单受控组件的 state 不会被原生 reset 影响，必须同步更新 state
重置这件事，表面简单，实际总卡在“你以为它该清掉的，其实根本没绑定到原始 HTML 值上”。
