<button type="submit"> и <input type="submit"> — оба отправляют форму. Разница в том, что внутри <button> можно помещать любой HTML-контент (текст, иконки, изображения), а <input> — пустой элемент, содержимое которого задаётся только атрибутом value. На этом различии строится всё остальное.
Что такое <input type="submit">
Пустой элемент-замыкатель. Создаёт кнопку отправки формы, текст на которой задаётся атрибутом value:
<form action="/login" method="post"> <input type="text" name="login"> <input type="password" name="password"> <input type="submit" value="Войти"> </form>
Текст кнопки — это значение value. Разметку внутрь элемента поместить нельзя: <input> не имеет закрывающего тега и не допускает дочерних узлов.
Особенности
- Значение отправляется на сервер. Атрибут
name(если задан) вместе сvalueпопадает в данные формы. Пример:<input type="submit" name="action" value="save">отправитaction=save. - Можно использовать несколько кнопок отправки с разными
name/valueдля определения, какая именно была нажата. - Стилизация ограничена. Внутрь нельзя вложить иконку или произвольную разметку — только текст через
value. - Поведение по умолчанию в форме. Если внутри
<form>есть только один<input type="submit">, нажатие Enter в текстовом поле также отправит форму.
Что такое <button>
Контейнерный элемент. Текст и любая HTML-разметка помещаются между открывающим и закрывающим тегами:
<form action="/login" method="post"> <input type="text" name="login"> <input type="password" name="password"> <button type="submit">Войти</button> </form>
Атрибут type
У <button> три значения type:
submit(по умолчанию) — отправляет форму, в которой находится.reset— сбрасывает значения полей формы к исходным.button— не делает ничего сам по себе, поведение задаётся через JavaScript.
<button type="submit">Сохранить</button> <button type="reset">Очистить</button> <button type="button" onclick="showDialog()">Показать окно</button>
Ключевая особенность: type по умолчанию — submit
Если атрибут type не указан, <button> внутри формы ведёт себя как кнопка отправки. Это источник частых ошибок: разработчик добавляет <button> для вызова JavaScript, забывает type="button", и нажатие на неё отправляет форму.
<form action="/save" method="post"> <input type="text" name="title"> <!-- Опасно: без type="button" форма отправится --> <button onclick="openPreview()">Предпросмотр</button> </form>
Правильно:
<button type="button" onclick="openPreview()">Предпросмотр</button>
Содержимое
Внутрь <button> можно помещать практически любой HTML:
<button type="submit"> <svg width="16" height="16" viewBox="0 0 16 16"> <path d="M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z"/> </svg> Сохранить </button>
<button type="submit"> <img src="icon-save.png" alt=""> <span>Сохранить</span> </button>
<button type="submit"> <strong>Оплатить</strong><br> <small>495 ₽</small> </button>
С <input type="submit"> всё это невозможно — только плоский текст в value.
Сравнение по пунктам
1. Содержимое
<input type="submit"> |
<button type="submit"> |
|
|---|---|---|
| Текст | Через value |
Внутри тегов |
| Иконки (SVG, img) | Невозможно | Да |
| Произвольная разметка | Невозможно | Да |
| Переносы строк, форматирование | Невозможно | Да |
2. Отправляемое значение
Оба элемента могут передавать значение на сервер через name и value:
<input type="submit" name="action" value="save"> <button type="submit" name="action" value="save">Сохранить</button>
При нажатии оба отправят action=save. Текст на кнопке <button> и её value не обязаны совпадать:
<button type="submit" name="action" value="delete"> <svg>...</svg> Удалить </button>
Здесь на сервер уйдёт action=delete, хотя на кнопке отображается иконка и слово «Удалить». У <input> текст кнопки и отправляемое значение — это одно и то же (value).
3. Отправка формы
Оба элемента отправляют родительскую форму при нажатии. Оба поддерживают атрибуты formaction, formmethod, formenctype, formtarget, formnovalidate — для переопределения параметров формы:
<form action="/default" method="post"> <input type="text" name="data"> <button type="submit" formaction="/custom" formmethod="get">Спец-отправка</button> </form>
4. Стилизация
<button> даёт полный контроль над содержимым: иконки, шрифты, вложенные элементы. <input type="submit"> ограничен стилизацией рамки, фона и шрифта — внутреннюю структуру изменить нельзя.
В ранние годы CSS-движки браузеров по-разному отображали <button> (отступы по умолчанию в Firefox, фоновые стили в IE), что породило рекомендацию использовать <input>. Современные браузеры унифицировали отображение, и это различие потеряло актуальность.
5. Доступность
Оба элемента доступны скринридерам и поддерживают фокус клавиатурой. Различия:
- У
<button>есть закрывающий тег, и доступное имя формируется из текстового содержимого. Дополнительно можно использоватьaria-labelилиaria-labelledby. - У
<input type="submit">доступное имя берётся изvalue. Еслиvalueпуст, браузер подставляет локализованный текст по умолчанию («Отправить», «Submit»).
<!-- Доступное имя: «Войти» --> <input type="submit" value="Войти"> <!-- Доступное имя: «Войти» --> <button type="submit">Войти</button> <!-- Доступное имя из aria-label --> <button type="submit" aria-label="Войти"> <svg aria-hidden="true">...</svg> </button>
6. Отключение
Оба поддерживают атрибут disabled:
<input type="submit" value="Отправить" disabled> <button type="submit" disabled>Отправить</button>
Отключённая кнопка не реагирует на клик, не получает фокус и не отправляет форму.
Где какой ставить
<input type="submit">
Подходит, когда:
- Кнопка содержит только текст, без иконок и сложной разметки.
- Нужна максимальная простота и совместимость с устаревшими системами.
- Форма генерируется на сервере шаблонизатором, где проще вывести однострочный тег.
<input type="submit" value="Отправить заявку">
<button type="submit">
Подходит, когда:
- Нужна иконка, изображение или сложная вёрстка внутри кнопки.
- Требуется гибкая стилизация содержимого.
- Кнопка участвует в JavaScript-логике и нужен явный
type="button"для непредсказуемых действий. - Проект придерживается современных стандартов доступности и семантики.
<button type="submit"> <svg class="icon" aria-hidden="true">...</svg> <span>Скачать отчёт</span> </button>
Распространённые ошибки
Забытый type у <button> внутри формы. Без type="button" любая <button> отправляет форму. Если кнопка предназначена для JavaScript-действия — всегда указывайте type="button".
<button> вне формы без атрибута form. Элемент <button> может отправлять форму, даже если не находится внутри неё, через атрибут form:
<form id="search" action="/search" method="get"> <input type="text" name="q"> </form> <!-- Кнопка вне формы, но связана с ней --> <button type="submit" form="search">Найти</button>
<input type="submit"> также поддерживает атрибут form, но на практике это встречается реже.
Вложение интерактивных элементов внутрь <button>. Внутри <button> нельзя помещать другие <button>, <a>, <input> и другие интерактивные элементы — это нарушает спецификацию HTML и приводит к непредсказуемому поведению.
Пустой value у <input type="submit">. Если value не задан, браузер подставит текст по умолчанию, который зависит от языка и версии — это может не совпадать с задуманным дизайном.
Итог
<button> — более универсальный элемент. Он поддерживает всё, что умеет <input type="submit">, плюс произвольное содержимое. <input type="submit"> — унаследованный способ создания текстовой кнопки отправки, проще в разметке, но ограниченный по содержимому. Если кнопка состоит только из текста — оба варианта равнозначны. Если нужна иконка или сложная вёрстка — только <button>.
Загрузка...