dialog 提交后不关闭是因为其与 form 解耦，需显式调用 close()；formmethod="dialog" 仅适用于无服务端处理的按钮点击，不触发 submit 事件且不兼容旧版 Safari。
dialog 元素 submit 后不关闭的常见原因
默认情况下，<dialog> 不会因为表单提交而自动关闭——它和 <form> 是解耦的。点击 <input type="submit"> 或触发表单提交，只会发送请求或触发 submit 事件，dialog.close() 必须显式调用。常见错误是以为加了 method="dialog" 就能关，但这个值只对 <button formmethod="dialog"> 有效，且仅适用于按钮点击（非表单 submit 事件）。
使用 formmethod="dialog" 关闭 dialog 的适用场景与限制
当 dialog 内部只有简单交互（如确认、选择、输入短文本），且不需要服务端处理时，可直接用 formmethod="dialog" 让按钮“假装提交”并关闭 dialog。它不会发网络请求，只触发 close 并将按钮的 value 作为 returnValue。
-
<button formmethod="dialog" value="confirm">确定</button>点击后 dialog 立即关闭，dialog.returnValue变为"confirm" - 该方式**不触发
submit事件**，无法做表单校验、异步保存等逻辑 - 必须放在
<form>内，且<form>的method属性会被忽略 - 不兼容旧版 Safari（
监听 submit 事件 + 手动 close 的标准做法
这是最通用、可控性最强的方式，适用于所有需要校验、异步提交、错误处理的场景。关键点在于：阻止默认提交行为（避免页面跳转或刷新），执行业务逻辑，成功后再调用 dialog.close()。
<dialog id="myDialog">
<form id="myForm">
<input name="title" required>
<button type="submit">保存</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
const form = document.getElementById('myForm');
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 必须！否则页面可能跳转或刷新
const data = new FormData(form);
try {
const res = await fetch('/api/save', {
method: 'POST',
body: data,
});
if (res.ok) {
dialog.close(); // 成功后关闭
} else {
alert('保存失败');
}
} catch (err) {
console.error(err);
}
});
</script>
- 务必调用
e.preventDefault()，否则<form>默认行为会干扰 dialog - 关闭前可检查
dialog.open状态，避免重复 close 报错 - 如果提交失败，dialog 应保持打开，方便用户修改
关闭后重置表单或清理状态的必要操作
dialog 关闭本身不会重置内部表单，也不会清空 input 值或校验状态。若下次再 showModal()，用户会看到上次残留的数据和红色报错边框。
立即学习“前端免费学习笔记（深入）”；
- 在
dialog.close()后立即调用form.reset()，清空值和校验样式 - 监听
dialog的close事件比放在 submit 回调里更稳妥，尤其当关闭可能来自外部（如 Esc 键、Backdrop 点击） - 如果 dialog 内有动态渲染内容（如下拉选项由 API 填充），关闭时建议清空对应
<select>或重置数据源
容易被忽略的是：dialog 元素的 open 属性是只读的，不能靠删属性来“隐藏”，必须用 close() 或 showModal() 控制；而表单重置这件事，没人帮你做，得自己写。
