У тега button есть три типа: submit (отправляет форму), reset (сбрасывает поля) и button (просто кнопка, сама ничего не делает). Если тип не указан, кнопка по умолчанию ведёт себя как submit - частая причина случайной отправки формы. У input type="submit" похожая роль, но button может содержать разметку внутри, а input - только текст в атрибуте value.
В этом уроке
Нажми "Просто кнопка" - ничего не изменится. Теперь нажми "Кнопка без type" - текст ниже поменяется, хотя ты не нажимал ничего похожего на "Отправить". Вот что значит тип по умолчанию.
Тип кнопки в HTML по умолчанию: button без type
Если у button не указать атрибут type, браузер сам считает его type="submit" - это поведение по умолчанию, а не случайность. Из-за этого кнопка, добавленная просто для JS-действия (открыть модальное окно, переключить вкладку) и случайно оказавшаяся внутри form, при клике неожиданно отправляет форму или перезагружает страницу.
<button type="button" onclick="...">Открыть окно</button> - явный type="button" гарантирует, что клик не отправит форму.
<button onclick="...">Открыть окно</button> - без type кнопка по умолчанию submit: клик внутри формы отправит её, хотя это явно не входило в план.
Кнопка с содержимым в HTML: чем button отличается от input type=submit
input - это тег без содержимого: подпись кнопки задаётся только текстом в атрибуте value. У button подпись - это его содержимое между открывающим и закрывающим тегом, а значит внутри можно разместить не только текст, но и картинку, иконку или другую разметку.
<button type="submit"><img src="..." alt=""> Оформить заказ</button> - картинка и текст вместе, потому что button принимает содержимое.
<input type="submit" value="<img src=...> Оформить заказ"> - value это просто текст: теги внутри не превратятся в картинку, а покажутся как обычные символы.
<button name="x" value="y">Текст</button> IE отправлял на сервер видимый текст кнопки вместо значения value - в отличие от всех остальных браузеров. Именно отсюда родился долгоживущий совет "не используй button для отправки формы", который к эпохе IE8 уже устарел.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забыть type="button" у кнопки для JS-действия внутри form | Кнопка получает тип submit по умолчанию и неожиданно отправляет или перезагружает форму | Всегда явно указывать type="button" для кнопок, которые не должны отправлять форму |
| Перепутать input type="button" и input type="submit" | Кнопки выглядят одинаково, но одна отправляет форму, а другая - нет | Выбирать type по реальному действию кнопки, а не по внешнему виду |
| Пытаться вставить картинку или разметку в value у input | value - это просто текст: теги внутри покажутся как символы, а не отрендерятся | Использовать button с содержимым или отдельный input type="image" |
Шпаргалка
| Вариант | Что делает |
|---|---|
| button (без type) | По умолчанию ведёт себя как submit - отправляет форму |
| button type="button" | Просто кнопка, сама ничего не делает - только JS-обработчики |
| button type="reset" | Сбрасывает все поля формы к начальным значениям |
| input type="submit" | Отправляет форму, подпись - только текст в value |
| button vs input | button принимает содержимое (текст, картинки, разметку), input - только текст в value |
Коротко: отвечаем на вопросы
Чем отличается button от input type=submit?
Обе кнопки могут отправлять форму, но у них разное содержимое: button может содержать разметку внутри себя (текст, картинки, вложенные элементы), а у input подпись задаётся только текстом в атрибуте value - никакая разметка внутри value не отрендерится.
Как не дать кнопке случайно отправить форму?
Явно указать type="button" у кнопок, которые не должны отправлять форму. Без этого браузер по умолчанию считает button кнопкой типа submit - это реальная и широко известная проблема: попытка сменить умолчание в спецификации была отклонена именно из-за огромного объёма уже существующей разметки, которая на неё полагается.
Какой тип у button по умолчанию, если не указать type?
submit. Это подтверждено и спецификацией, и поведением всех современных браузеров - button без явного type ведёт себя точно так же, как button type="submit".
Можно ли вставить картинку в кнопку отправки формы?
Да, но не через input type="submit" - там подпись это просто текст. Картинку можно вставить внутрь button (он принимает содержимое) или использовать отдельный input type="image", специально предназначенный для кнопки-картинки.
