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）
– 建议加确认弹窗，尤其当用户已输入内容时

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

备注取消

<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 更符合用户预期

别把“取消”和“关闭弹窗”混为一谈

很多新手直接给弹窗里的按钮绑 onclick="modal.style.display='none'"，但这样：
– 没释放焦点，键盘用户卡在不可见区域
– 没恢复页面滚动，背景页可能被锁死
– 没清理事件监听器，重复打开会叠加监听
真正安全的做法：用 dialog 元素或确保关闭时调用 modal.close() + document.body.focus()

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！