I am writing HTML dialog forms, with data-entry fields, where a "Cancel" button can be clicked to exit the modal dialog. Which one of the "submit", "reset", and "button" <input> types is most appropriate for a cancel button and why? Research The MDN page on <dialog> elements provides an example where <button> (without type attributes) is used for both cancel and confirm buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example The MDN page on the HTMLDialogElement.showModal() function provides a similar example where <button type="reset"> is used for the cancel button: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal I've also read around online, including some answers on this site, where <input type="button"> was used in recommendation examples. To summarize my understanding: Omitted type or type="button" buttons do not imply that the button will submit a valid form nor' that the form will explicitly reset your data entries. However they require you to write more JavaScript to close the dialog unlike type="submit" . The markup also doesn't indicate that this is one of the ways of closing the dialog form. Buttons with type="reset" imply that the data entries will be cleared and event.preventDefault() is required to contradict the markup. However, resetting is not ideal ( https://ux.stackexchange.com/a/42773 ), you still need to write JavaScript to close the dialog, and the button's function contradicts the markup due to the form being closed with JavaScript or if you decide to prevent the data reset. Buttons with type="submit" may imply being alternative means of closing/completing the dialog and the dialog is automatically closed when submit-type buttons are clicked. You only need JavaScript to listen for close events and to check the <dialog> 's returnValue attribute to see if cancelling happened. However, the markup / submit-type may imply that the form will be submitted with valid entries instead of cancelling. Considering this, if my understanding is valid (?), and any other reasons that I might be oblivious to (concerning what markup is most readable and presents the most elegant use of JavaScript), which approach should be taken for Cancel buttons in dialog forms? Sample: <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.: I've noticed there's an experimental HTMLDialogElement 'cancel' event, but it's subject to change and its MDN page seems inaccurate or incomplete.

Type type="button" is the best choice. You can write a function and use in the onclick event to exit the modal as you want. If you use submit or reset you will need to prevent their default behavior, using event.preventDefault() .

Which button type should be used for HTML dialog cancel buttons?

I am writing HTML dialog forms, with data-entry fields, where a "Cancel" button can be clicked to exit the modal dialog. Which one of the "submit", "reset", and "button" <input> types is most appropriate for a cancel button and why?

Research

The MDN page on <dialog> elements provides an example where <button> (without type attributes) is used for both cancel and confirm buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example

The MDN page on the HTMLDialogElement.showModal() function provides a similar example where <button type="reset"> is used for the cancel button: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

I've also read around online, including some answers on this site, where <input type="button"> was used in recommendation examples.

To summarize my understanding:

Omitted type or type="button" buttons do not imply that the button will submit a valid form nor' that the form will explicitly reset your data entries. However they require you to write more JavaScript to close the dialog unlike type="submit". The markup also doesn't indicate that this is one of the ways of closing the dialog form.
Buttons with type="reset" imply that the data entries will be cleared and event.preventDefault() is required to contradict the markup. However, resetting is not ideal (https://ux.stackexchange.com/a/42773), you still need to write JavaScript to close the dialog, and the button's function contradicts the markup due to the form being closed with JavaScript or if you decide to prevent the data reset.
Buttons with type="submit" may imply being alternative means of closing/completing the dialog and the dialog is automatically closed when submit-type buttons are clicked. You only need JavaScript to listen for close events and to check the <dialog>'s returnValue attribute to see if cancelling happened. However, the markup / submit-type may imply that the form will be submitted with valid entries instead of cancelling.

Considering this, if my understanding is valid (?), and any other reasons that I might be oblivious to (concerning what markup is most readable and presents the most elegant use of JavaScript), which approach should be taken for Cancel buttons in dialog forms?

Sample:

<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.: I've noticed there's an experimental HTMLDialogElement 'cancel' event, but it's subject to change and its MDN page seems inaccurate or incomplete.

Which button type should be used for HTML dialog cancel buttons?

Research

1 Answers