HTML тег <button>

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

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

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

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

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

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

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

Показать браузеры

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

Совместимостьhtml.elements.button

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
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

Атрибуты

Пример использования

<!DOCTYPE html>
<html>
  <head>
    <title>Тег <button></title>
  </head>
  <body>
    <button type="button" name="button1" style="width: 80px; height: 50px"> <b>Кнопка 1</b> </button
    ><br /><br />
    <button type="button" name="button2" style="width: 80px; height: 50px">
      <img src="../../images/top2.png" alt="up" width="40" height="40" /> </button
    ><br /><br />
    <button type="button" name="button3" style="width: 80px; height: 50px"> <i>Кнопка 3</i> </button
    ><br /><br />
  </body>
</html>

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

• Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
• Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
• Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

Результат нашего примера:

В следующем примере рассмотрено применение атрибутов, которые позволяют не производить проверку данных на корректность, введенных пользователем и задать браузеру, где показать ответ, полученный после отправки формы.

<!DOCTYPE html>
<html>
  <head>
    <title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title>
  </head>
  <body>
    <form id="myForm">
      <input type="text" name="ulogin" placeholder="Ваше имя" /><br />
      <!-- определяем элемент управления для текстовой информации -->
      <textarea name="uquestion" cols="35" rows="5" placeholder="Ваш вопрос"></textarea><br />
      <button formtarget="_blank" formnovalidate>Отправить</button>
      <!-- определяем кнопку для отправки формы -->
    </form>
  </body>
</html>

В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtarget со значением "_blank" указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.

Результат нашего примера:

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

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

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

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