Какие типы кнопок в HTML существуют кроме submit

Что проверяют

Знаете ли вы атрибут type у кнопки и поведение по умолчанию, из-за которого формы внезапно отправляются. Следом обычно спрашивают, чем <button> отличается от <input type="button"> и почему кнопку не стоит собирать из <div>.

Как отвечать

У <button> три значения type:

• submit: отправляет форму. Это значение по умолчанию, оно же применяется, если атрибут не указан или указан с ошибкой;
• reset: возвращает поля формы к исходным значениям. В интерфейсах почти не нужна: её нажимают случайно и теряют ввод;
• button: ничего не делает сама, поведение задаёт JavaScript.

У <input> есть кнопочные типы submit, reset, button и image. Последний отправляет форму по клику на картинку и передаёт координаты клика. Разница с <button> в содержимом: <input> показывает только текст из value, а в <button> можно положить иконку и разметку.

Полезно назвать атрибуты отправляющей кнопки: form="id" привязывает её к форме, даже если кнопка стоит вне формы, а formaction, formmethod и formnovalidate переопределяют параметры формы для конкретной кнопки. Ещё кнопка умеет открывать поповер без скриптов через popovertarget.

Про доступность: <button> сам получает фокус, срабатывает по Enter и пробелу и объявляется скринридером как кнопка. У <div onClick> ничего этого нет, придётся вручную добавлять role="button", tabindex="0" и обработку клавиш.

Где спотыкаются

Не указывают type у кнопки внутри формы. Кнопка «Показать пароль» или «Добавить поле» оказывается submit, и форма отправляется при каждом клике. В React всё точно так же.

Называют radio, checkbox или hidden типами кнопок. Это типы полей ввода, к кнопкам они отношения не имеют.

Вешают действие на <div> или <a href="#">. Первый недоступен с клавиатуры, а ссылка объявляется ссылкой, не реагирует на пробел и прокручивает страницу наверх.