<button>

Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.