<button> - HTML-елемент кнопки

HTML-елемент <button> — це інтерактивний елемент, який активується користувачем за допомогою миші, клавіатури, пальця, голосу або іншого допоміжного пристрою. Після активації він виконує дію, наприклад, надсилає форму або відкриває діалогове вікно.

За замовчуванням кнопки завжди мають тип submit. Це означає, що якщо ви не вкажете інший тип, кнопка буде намагатися надіслати дані форми.

HTML
<button>...</button>

Атрибути

Цей тег може мати глобальні атрибути.

autofocus

Булевий атрибут, який вказує, що кнопка повинна мати фокус вводу, коли сторінка завантажується.

disabled

Булевий атрибут, який запобігає взаємодії користувача з кнопкою. Вона не буде отримувати фокус, а події кліку не будуть спрацьовувати.

form

Атрибут id форми, до якої належить кнопка. За замовчуванням кнопка належить до найближчої батьківської форми.

formaction

URL-адреса, яка обробляє інформацію, надіслану кнопкою. Перевизначає атрибут action форми.

formenctype

Вказує, як дані форми повинні бути закодовані під час надсилання на сервер. Перевизначає атрибут enctype форми.

formmethod

Вказує HTTP-метод, який браузер використовує для надсилання форми. Перевизначає атрибут method форми.

formnovalidate

Булевий атрибут, який вказує, що форма не повинна перевірятися під час надсилання. Перевизначає атрибут novalidate форми.

formtarget

Вказує, де відображати відповідь після надсилання форми. Перевизначає атрибут target форми.

name

Ім’я кнопки, яке надсилається разом із даними форми.

type

Поведінка кнопки за замовчуванням. Можливі значення:

submit: Кнопка надсилає дані форми на сервер. Це значення за замовчуванням, якщо атрибут не вказано.
reset: Кнопка скидає всі елементи керування до їх початкових значень.
button: Кнопка не має поведінки за замовчуванням і зазвичай використовується з JavaScript для виконання дій на стороні клієнта.

value

Початкове значення кнопки. Надсилається разом із даними форми.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, інтерактивний контент, відчутний контент.
Дозволений вміст	Фразовий контент, але не повинно бути інтерактивного контенту.
Пропуск тегів	Початковий і кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, який приймає фразовий контент.
Роль ARIA	`button`
DOM інтерфейс	`HTMLButtonElement`

Приклади використання

<button type="button">
  Тик сюди!
</button>

<form>
  <fieldset>
    <legend>Ваше повне ім’я</legend>
    <input type="text" placeholder="Ім’я" required>
    <input type="text" placeholder="Прізвище" required>
    <input type="text" placeholder="По батькові" required>
  </fieldset>
  <button type="reset">Очистити форму</button>
</form>

fieldset {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

Стилі за замовчуванням

CSS
/* Стилі сильно різниться в залежності від браузеру */
/* Нижче представлені стилі для Chrome */
button {
  -webkit-appearance: button;
  text-rendering: auto;
  color: ButtonText;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  box-sizing: border-box;
  background-color: ButtonFace;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px outset ButtonBorder;
  border-image: initial;
}

Підтримка браузерів



`<button>`
`command`
`commandfor`
`disabled`
`form`
`formaction`
`formenctype`
`formmethod`
`formnovalidate`
`formtarget`
`interestfor`
`name`
`popovertarget`
`popovertargetaction`
`type`
`value`