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'取消'事件，但是它可能会发生变化，并且其MDN页面似乎不正确或不完整。

Answer 1

类型onclick是最佳选择。您可以编写函数并在submit事件中使用，以根据需要退出模态。

如果您使用reset或event.preventDefault()，则需要使用(\d+)?来防止其默认行为。

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

研究

1 个答案: