HTML 对话框取消按钮应使用哪种按钮类型？

Question

我正在编写带有数据输入字段的 HTML 对话框表单，其中可以单击“取消”按钮以退出模式对话框。 “提交”、“重置”和“按钮”<input> 类型中的哪一种最适合取消按钮，为什么？

研究

<dialog> 元素上的 MDN 页面提供了一个示例，其中<button>（没有类型属性）用于取消和确认按钮：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example

HTMLDialogElement.showModal() 函数上的 MDN 页面提供了一个类似的示例，其中 <button type="reset"> 用于取消按钮：https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

我也在网上阅读过，包括这个网站上的一些答案，其中<input type="button"> 用于推荐示例。

总结一下我的理解：

• 省略的类型或type="button" 按钮并不意味着该按钮将提交有效的表单，也不意味着该表单将明确重置您的数据条目。但是，与type="submit" 不同，它们要求您编写更多 JavaScript 来关闭对话框。标记也不表示这是关闭对话框表单的一种方式。

• 带有type="reset" 的按钮意味着数据条目将被清除，并且需要 event.preventDefault() 来与标记相矛盾。但是，重置并不理想（https://ux.stackexchange.com/a/42773），您仍然需要编写 JavaScript 来关闭对话框，并且由于使用 JavaScript 关闭表单或您决定阻止数据重置，因此按钮的功能与标记相矛盾。

• 带有type="submit" 的按钮可能意味着关闭/完成对话框的替代方式，并且当单击提交类型的按钮时对话框会自动关闭。您只需要 JavaScript 来监听关闭事件并检查 <dialog> 的 returnValue 属性以查看是否发生了取消。但是，标记/提交类型可能意味着表单将与有效条目一起提交而不是取消。

考虑到这一点，如果我的理解是有效的 (?)，以及我可能没有注意到的任何其他原因（关于哪些标记最易读，并呈现了 JavaScript 的最优雅用法），那么应该对取消按钮采用哪种方法在对话形式中？

示例：

<dialog id="forCloseEventListener">
  <form method="dialog">
    <input type="text" name="data-entry" placeholder="Enter your post code">
    <input type="??" value="Cancel">
    <input type="submit" value="OK">
  </form>
</dialog>

P.S.：我注意到有一个实验性的 HTMLDialogElement 'cancel' 事件，但它可能会发生变化，它的 MDN 页面似乎不准确或不完整。

Answer 1

键入type="button" 是最佳选择。您可以编写一个函数并在onclick 事件中使用以根据需要退出模态。

如果您使用submit 或reset，则需要使用event.preventDefault() 来阻止它们的默认行为。