type="reset"不等于“取消”，它仅还原表单初始HTML值，不处理JS修改、不触发回调、不清空手动输入；真正取消需type="button"+JS手动清空并加确认提示。
type="reset 按钮不是“取消”，而是“重置表单到初始值”；真要取消操作，得用 type="button" + JavaScript 手动清空或跳转，否则用户点一下就丢数据。
为什么 type="reset 不等于“取消”？
它只还原表单控件的初始 HTML 值（比如 <input value="默认文本">），不会清空用户手动输入、不会触发任何回调、也不管 JS 动态改过的值。常见误用场景：
– 表单里混着 JS 生成的字段（reset 完全不处理）
– 用户填完一半想“取消并返回上一页”，点了 reset 却留在原地、内容还剩一半
– 用了 required 或自定义校验，reset 后表单状态混乱（比如错误提示没消失）
type="button" + 简单 JS 实现真正“取消”
这才是可控、可预测的取消方式。关键点：
– 必须显式写 type="button"，否则在 <form></form> 里默认是 submit
– 清空逻辑要覆盖所有字段类型（input、textarea、select、checkbox）
– 建议加确认弹窗，尤其当用户已输入内容时
<form id="myForm">
<input name="name" value="张三">
<textarea name="note">备注</textarea>
<button type="button" onclick="cancelForm()">取消</button>
</form>
<script>
function cancelForm() {
if (confirm('确定要取消？已填内容将丢失')) {
const form = document.getElementById('myForm');
form.reset(); // 先还原初始值
// 再手动清空可能被 JS 修改过的字段
form.querySelectorAll('input, textarea, select').forEach(el => {
if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
else el.value = '';
});
}
}
</script>
移动端和键盘用户的取消体验不能漏
纯鼠标点击不够，还得支持：
– 键盘 Tab 到按钮后按 Enter 触发（type="button" 天然支持）
– :focus 样式必须可见（别删 outline，至少加 outline: 2px solid #007bff）
– 触摸屏上 :active 要有视觉反馈（比如背景色变深或轻微缩放）
– 如果取消后要跳转，用 window.history.back() 比硬跳 location.href 更符合用户预期
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别把“取消”和“关闭弹窗”混为一谈
很多新手直接给弹窗里的按钮绑 onclick="modal.style.display='none'"，但这样：
– 没释放焦点，键盘用户卡在不可见区域
– 没恢复页面滚动，背景页可能被锁死
– 没清理事件监听器，重复打开会叠加监听
真正安全的做法：用 dialog 元素或确保关闭时调用 modal.close() + document.body.focus()
立即学习“前端免费学习笔记（深入）”；
