formmethod="dialog"仅作用于单个按钮，点击时关闭dialog并设dialog.returnvalue为该按钮的value值；需确保按钮有非空value，且表单在dialog内；多按钮可混用不同formmethod；不序列化表单数据，需手动处理字段传递。
formmethod="dialog" 只对单个按钮生效，别和 form method="dialog" 混用
它不是给整个表单设的开关，而是给某个 <button></button> 或 <input type="submit"> 单独加的“退出指令”。只要这个按钮被点击，且表单在 <dialog></dialog> 内部，浏览器就会自动调用 dialog.close() 并把它的 value 赋给 dialog.returnValue。
常见错误是同时写 <form method="dialog"></form> 和某个按钮上再加 formmethod="dialog"——这不冲突，但后者会覆盖前者的默认行为；更危险的是误以为写了 formmethod 就不用管表单嵌套位置了，其实照样要满足“<form></form> 是 <dialog></dialog> 的直接子元素或后代”这个前提。
- 多个按钮可以混用不同
formmethod：一个设formmethod="dialog"（关窗），另一个设formmethod="post"（真提交） - 没写
formmethod的 submit 按钮，仍按表单默认method行为走（比如刷新页面） -
formmethod="dialog"不会阻止其他按钮的默认行为，只影响它自己
按钮必须带非空 value，否则 dialog.returnValue 是空字符串
formmethod="dialog" 关闭弹窗时传的值，**只取按钮的 value 属性值**，不是表单字段、不是按钮文字、不是 name。如果漏写 value，或者写成 value=""，dialog.returnValue 就是空字符串（不是 undefined），容易在 close 事件里误判为“用户点了遮罩或 Esc”。
- 正确写法：
<button type="submit" value="confirm">确定</button> - 错误写法：
<button type="submit">确定</button>（无 value）、<button type="submit" value="">取消</button>（空值） - 别依赖 innerText 或 textContent 去读取按钮文字来判断操作类型——它们和返回值无关
formmethod="dialog" 不序列化表单数据，想传字段得手动处理
它只负责关闭对话框并传一个字符串（按钮的 value），**完全不读 <input>、不收集 FormData、不触发任何回调**。如果你需要把用户名、选项等一起带回，必须放弃自动关闭路径，改用 submit 事件监听 + e.preventDefault() + 手动 dialog.close()。
- 先移除所有
formmethod="dialog"和method="dialog"，避免抢跑 - 在
form.addEventListener('submit', e => { e.preventDefault(); ... })里取new FormData(form) -
dialog.close(JSON.stringify(Object.fromEntries(formData)))—— 注意参数只能是字符串 - 后续用
JSON.parse(dialog.returnValue)解析，记得加 try/catch
点击 backdrop 或按 Esc 时 dialog.returnValue 是空字符串，不是 undefined
这是最容易忽略的兼容细节：dialog.returnValue 在用户主动点按钮（且按钮有非空 value）时才被设为那个字符串；而点遮罩、按 Esc、或手动调用 dialog.close() 时，它**保持为空字符串**（""），不是 undefined。所以不能靠 if (!dialog.returnValue) 判断是否“取消”，得显式对比：
- 推荐写法：
if (dialog.returnValue === "cancel") { ... } else if (dialog.returnValue === "confirm") { ... } else { /* 点遮罩/ESC/手动close */ } - 别在
submit事件里读dialog.returnValue—— 此时还没关，值还是旧的或空的 - 要在
dialog.addEventListener('close', () => { ... })里读，且确保逻辑在事件处理器内执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
