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


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

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023