input type="reset"只会重置表单控件的初始值，不会重置按钮的disabled、class等js修改的状态；需监听reset事件手动同步按钮状态。
reset 按钮根本不会重置按钮的点击状态
直接说结论：input type="reset 只会把表单控件恢复到页面加载时的初始值（value、checked、selected 等），但不会影响按钮本身的 disabled、class、textContent 或其他 JS 修改的状态。所谓“点击状态”是 JavaScript 手动设置的，reset 不感知、不处理。
为什么 reset 对 button 的 disabled 或 class 无效
HTML 表单重置机制只作用于可提交的表单控件（input、select、textarea）及其原生状态属性。按钮（button 或 input type="button"）不属于“可重置控件”，其 disabled 属性哪怕被 JS 设为 true，reset 也不会把它变回 false；同理，任何通过 element.classList.add() 添加的类名，reset 完全无视。
-
reset触发的是表单的reset事件，不是 DOM 元素的“还原快照”操作 - 浏览器只维护每个表单控件的“初始值快照”，按钮没有这个快照
- 如果你用
input type="submit"并在 JS 中禁用它，reset 后它依然保持disabled
想还原按钮状态？必须手动同步
唯一可靠方式是监听表单的 reset 事件，在回调里显式还原按钮状态。常见场景如：提交前禁用按钮防重复点击，重置时需一并启用。
const form = document.querySelector('form');
const submitBtn = document.querySelector('#submit-btn');
form.addEventListener('reset', () => {
submitBtn.disabled = false;
submitBtn.textContent = '提交';
submitBtn.classList.remove('loading');
});
- 不要依赖
form.reset()的副作用——它不触发reset事件，除非是用户点击input type="reset" - 如果按钮状态依赖多个字段，可在
reset回调里重新计算（比如根据form.checkValidity()决定是否启用） - 注意：若按钮是
input type="button"，它的value虽然会被 reset 影响（仅当有value属性且初始设过），但这是意外行为，不可靠
替代方案：避免让 reset 承担状态管理职责
更健壮的做法是把按钮状态和表单数据解耦，用函数封装状态逻辑，reset 后统一调用。
function syncButtonState() {
const isValid = form.checkValidity();
submitBtn.disabled = !isValid || isSubmitting;
}
form.addEventListener('reset', syncButtonState);
form.addEventListener('input', syncButtonState);
- 这样按钮状态始终由业务逻辑驱动，而非绑定到某个 DOM 操作上
- 如果使用框架（如 React/Vue），按钮状态应来自 state，reset 只负责清空表单数据，state 更新后自动同步 UI
- 容易被忽略的是：表单内嵌的自定义组件（如封装的开关、评分组件）同样不会被 reset 影响，必须单独处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
