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

Question

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

研究

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

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

我还在网上阅读了一些内容，包括该网站上的一些答案，这些答案<input type="button">在推荐示例中使用。

总结一下我的理解：

• 省略的类型或type="button"按钮并不意味着该按钮将提交有效的表单，也不意味着该表单将明确重置您的数据条目。然而，与type="submit". 标记也没有表明这是关闭对话框表单的方法之一。

• 按钮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>

PS：我注意到有一个实验性的 HTMLDialogElement“取消”事件，但它可能会发生变化，并且其 MDN 页面似乎不准确或不完整。

Answer 1

类型type="button"是最好的选择。您可以编写一个函数并在onclick事件中使用以根据需要退出模式。

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