Stylish HTML: Dialog cancel buttons with formmethod="dialog"

<dialog>s with forms have a simple HTML-only way to implement “Cancel” buttons. In addition to POST and GET, <form>s inside of <dialog>s can make use of the dialog method. This allows the submit button to close the dialog without submitting the form to the backend.

<dialog id="example-dialog">
  <form method="POST" action="/confirmations">
    <footer>
      <button type="submit" formmethod="dialog" formnovalidate value="cancel">
        Cancel
      </button>
      <button type="submit">
        Confirm
      </button>
    </footer>
  </form>
</dialog>
<dialog id="example-dialog">
  <form method="POST" action="/confirmations">
    <footer>
      <button type="submit" formmethod="dialog" formnovalidate value="cancel">
        Cancel
      </button>
      <button type="submit">
        Confirm
      </button>
    </footer>
  </form>
</dialog>

The formmethod="dialog" attribute on the cancel button overrides the form’s method, closing the dialog instead of submitting. The formnovalidate attribute ensures validation doesn’t block the cancel action.

Demo: