Use cases for <form method="dialog">
Posted on in HTML
I've started using a relatively less known value of the <form>
element's method
attribute, called dialog
, for the following scenarios:
- when a form is submitted via AJAX.
- when a form is a multi-step wizard, where each step is a form in itself, and I have to accummulate values from each step.
But what about MDN talking about using it in a <dialog>
element?
MDN reference defines method="dialog"
as:
When the form is inside a
<dialog>
, closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.
But the HTML spec, having been written in officialese and being the more authoritative source than MDN, provides a nice escape hatch.
The spec defines method="dialog"
as follows (emphasis mine):
Indicates the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit.
My interpretation is that method="dialog"
has two jobs:
-
If a
<form>
usingmethod="dialog"
is located inside a<dialog>
element, then its submission causes the dialog to close. -
method="dialog"
also does not really submit the form, i.e., it fires the submit event, but leaves the actual submission to further programming, like AJAX. As a nice side-effect, I don't have to fire an explicitev.preventDefault()
.
Am I wrong? May be. Please let me know in the comments.