Я пишу диалоговые формы HTML с полями для ввода данных, в которых можно нажать кнопку «Отмена» для выхода из модального диалога. Какой из типов «submit», «reset» и «button» <input> наиболее подходит для кнопки отмены и почему?
Исследование
Страница MDN для элементов <dialog> предоставляет пример, где <button> (без атрибутов типа) используется для кнопок отмены и подтверждения: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example
Страница MDN для функции HTMLDialogElement.showModal() предоставляет аналогичный пример, где <button type="reset"> используется для кнопки отмены: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
Я также читал в Интернете, включая некоторые ответы на этом сайте, где <input type="button"> использовался в примерах рекомендаций.
Подводя итог моему пониманию:
Пропущенный тип или type="button" не означают, что кнопка будет отправлять действительную форму, а также что эта форма явно сбрасывает ваши записи данных. Однако они требуют от вас писать больше JavaScript, чтобы закрыть диалоговое окно в отличие от type="submit". Разметка также не означает, что это один из способов закрытия диалоговой формы.
Кнопки с type="reset" означают, что записи данных будут очищены, а event.preventDefault () должен противоречить разметке. Однако сброс не идеален (https://ux.stackexchange.com/a/42773),, вам все еще нужно написать JavaScript, чтобы закрыть диалоговое окно, а функция кнопки противоречит разметке из-за того, что форма закрывается с помощью JavaScript или если вы решите предотвратить сброс данных.
Кнопки с type="submit" могут подразумевать альтернативные способы закрытия / завершения диалога, и диалоговое окно автоматически закрывается при нажатии на кнопки типа отправки. Вам нужен только JavaScript для прослушивания закрытых событий и проверки атрибута returnValue <dialog>, чтобы увидеть, произошло ли отмена. Однако тип разметки / отправки может означать, что форма будет отправлена с действительными записями вместо отмены.
Учитывая это, если мое понимание верно (?), И любые другие причины, по которым я мог бы не заметить (относительно того, какая разметка наиболее читаема и представляет собой наиболее элегантное использование 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 кажется неточной или неполной.