HTML тег `<button>`

Значение и применение

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = "button").

Всегда указывайте для тега <button> тип атрибута type = "button" если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.button
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`button`	✓1	✓12	✓1	✓≤15	✓1	✓18	✓4	✓≤14	✓1	✓1.0	✓4.4	✓1
`command`	✓135	✓135	✓144	✓120	✓26.2	✓135	✓144	✓89	✓26.2	✓29.0	✓135	✓26.2
`request-close`	✓139	✓139	✓144	✓123	✓26.2	✓139	✓144	✓91	✓26.2	✓30.0	✓139	✓26.2
`commandfor`	✓135	✓135	✓144	✓120	✓26.2	✓135	✓144	✓89	✓26.2	✓29.0	✓135	✓26.2
Implicit anchor reference via commandfor	✓135	✓135	✓147	✓120	✓26.2	✓135	✓147	✓89	✓26.2	✓29.0	✓135	✓26.2
`disabled`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`form`	✓9	✓16	✓4	✓15	✓5.1	✓18	✓4	✓14	✓5	✓1.0	✓4.4	✓5
`formaction`	✓9	✓12	✓4	✓15	✓5.1	✓18	✓4	✓14	✓5	✓1.0	✓37	✓5
`formenctype`	✓9	✓12	✓4	✓10.6	✓5.1	✓18	✓4	✓11	✓5	✓1.0	✓37	✓5
`formmethod`	✓9	✓12	✓4	✓15	✓5.1	✓18	✓4	✓14	✓5	✓1.0	✓37	✓5
`formnovalidate`	✓9	✓12	✓4	✓15	✓5.1	✓18	✓4	✓14	✓5	✓1.0	✓4.4	✓5
`formtarget`	✓9	✓12	✓4	✓15	✓5.1	✓18	✓4	✓14	✓5	✓1.0	✓4.4	✓5
`interestfor`	✓142	✓142	×	✓126	×	✓142	×	✓93	×	✓30.0	✓142	×
`name`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`popovertarget`	✓114	✓114	✓125	✓100	✓17	✓114	✓125	✓76	✓17	✓23.0	✓114	✓17
Implicit anchor reference via popovertarget	✓133	✓133	✓147	✓118	✓26	✓133	✓147	✓88	✓26	✓29.0	✓133	✓26
`popovertargetaction`	✓114	✓114	✓125	✓100	✓17	✓114	✓125	✓76	✓17	✓23.0	✓114	✓17
`type`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`value`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
Ещё 10 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`autofocus`	`autofocus`	Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
`disabled`	`disabled`	Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
`form`	`form_id`	Задает форму (элемент `<form>`) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (`id`) в этом же документе.
`formaction`	`URL`	Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для `<button type = "submit" >`).
`formenctype`	`application/x-www-form-urlencoded multipart/form-data text/plain`	Определяет, как данные формы должны быть закодированы при передаче на сервер (только для `<button type = "submit" >`).
`formmethod`	`get post`	Определяет, какой метод HTTP использовать при отправке данных формы (только для `<button type = "submit" >`).
`formnovalidate`	`formnovalidate`	Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для `<button type = "submit" >`).
`formtarget`	`_blank _self _parent _top framename`	Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение `_self` - отображает ответ в текущем окне. Используется только для `<button type = "submit" >`.
`name`	`name`	Задает имя для кнопки, которое передается при отправке формы.
`type`	`button reset submit`	Указывает тип кнопки. Значение по умолчанию `submit`.
`value`	`text`	Определяет начальное значение для кнопки.

Примеры, попробуйте сами

Типы кнопок

Измените поле и нажмите «Сбросить». Обычная кнопка сама по себе не отправляет форму.

index.html

HTML

<form>
  <label>Имя <input value="Анна" /></label><button type="button">Обычная кнопка</button
  ><button type="reset">Сбросить</button>
</form>

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 7 новых атрибутов.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <button>