<button>
- 25 января 2023
Тег <button>
создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице.
Синтаксис тега <button>
<button>Это кнопка</button>
Спецификация HTML
Тег <button>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <button>
считается семантическим тегом, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Простая кнопка:
<button>Нажми на меня!</button>
Кнопка с идентификатором и классом:
<button id="submit-btn" class="btn-primary">>Подписаться</button>
Кнопка с событием onclick
:
<button onclick="alert('Кнопка нажми!')">Нажми меня</button>
Для чего использовать тег <button>
- Для отправки формы.
- Для перезагрузки формы.
- Для запуска функции.
- Для открытия нового окна.
- Для переключения видимости элемента.
- Для запуска или остановки медиаплеера.
- Для добавления товара в корзину.
Атрибуты тега <button>
name
— имя кнопки.
type
— тип кнопки.
value
— значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled
— указывает, что кнопка должна быть отключена.
form
— одна или несколько форм, к которым принадлежит кнопка.
formaction
— URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype
— указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod
— метод HTTP, используемый при отправке данных формы.
formnovalidate
— устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget
— указывает, где отображать ответ после отправки формы.
Примечание: атрибут type
необходим, если указан атрибут value
.
Глобальные атрибуты
Тег <button>
поддерживает все глобальные атрибуты HTML.
Ограничения
Для использования тега <button>
нет никаких ограничений.
Нюансы
- Если атрибут
type
не указан, то по умолчанию используется значениеsubmit
. - Если атрибут
value
не указан, в качестве значения используется текст кнопки.
Поддержка браузерами
Тег <button>
поддерживается всеми основными современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Тег <input>
может использоваться как альтернатива тегу <button>
для создания кликабельных элементов.
Чем заменить тег
В некоторых случаях тег можно заменить тегом <a>
, например, когда кнопка используется для навигации или ссылки на другую страницу.
Актуальность
Тег <button>
является актуальным и поддерживается всеми браузерами.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023