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

Элемент <button> HTML — это интерактивный элемент, который пользователь активирует с помощью мыши, клавиатуры, пальца, голосовой команды или другой вспомогательной технологии. После активации он выполняет действие, например отправляет форму или открывает диалоговое окно.

По умолчанию HTML-кнопки отображаются в стиле, напоминающем платформу, на которой работает пользовательский агент, но внешний вид кнопок можно изменить с помощью CSS.

Попробуйте

<button class="favorite styled" type="button">Add to favorites</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

autofocus

Этот логический атрибут указывает, что кнопка должна получить фокус ввода при загрузке страницы. Только один элемент в документе может иметь этот атрибут.

command

Задаёт действие, которое должно быть выполнено над элементом, управляемым управляющим элементом <button>, указанным с помощью атрибута commandfor. Возможные значения:

"show-modal"

Кнопка покажет <dialog> как модальное окно. Если диалоговое окно уже является модальным, действие не выполняется. Это декларативный эквивалент вызова метода HTMLDialogElement.showModal() у элемента <dialog>.

"close"

Кнопка закроет элемент <dialog>. Если диалоговое окно уже закрыто, действие не выполняется. Это декларативный эквивалент вызова метода HTMLDialogElement.close() у элемента <dialog>. При использовании с атрибутом value значение кнопки будет передано в свойство returnValue диалогового окна.

"request-close"

Кнопка вызовет событие cancel для элемента <dialog>, чтобы запросить у браузера его закрытие, а затем вызовет событие close. Это отличается от команды close тем, что авторы могут вызвать Event.preventDefault() для события cancel, чтобы предотвратить закрытие элемента <dialog>. Если диалоговое окно уже закрыто, действие не выполняется. Это декларативный эквивалент вызова метода HTMLDialogElement.requestClose() у элемента <dialog>. При использовании с атрибутом кнопки value значение будет передано в свойство returnValue диалогового окна.

"show-popover"

Кнопка покажет скрытое всплывающее окно. Если попытаться показать уже отображаемое всплывающее окно, действие не выполняется. Подробнее см. в документации API всплывающих окон. Это эквивалентно установке значения show для атрибута popovertargetaction, а также представляет собой декларативный эквивалент вызова метода HTMLElement.showPopover() у элемента всплывающего окна.

"hide-popover"

Кнопка скроет отображаемое всплывающее окно. Если попытаться скрыть уже скрытое всплывающее окно, действие не выполняется. Подробнее см. в документации API всплывающих окон. Это эквивалентно установке значения hide для атрибута popovertargetaction, а также представляет собой декларативный эквивалент вызова метода HTMLElement.hidePopover() у элемента всплывающего окна.

"toggle-popover"

Кнопка переключит всплывающее окно между отображаемым и скрытым состояниями. Если всплывающее окно скрыто, оно будет показано; если оно отображается, оно будет скрыто. Подробнее см. в документации API всплывающих окон. Это эквивалентно установке значения toggle для атрибута popovertargetaction, а также представляет собой декларативный эквивалент вызова метода HTMLElement.togglePopover() у элемента всплывающего окна.

Пользовательские значения

Этот атрибут может содержать пользовательские значения, начинающиеся с двух символов дефиса (--). Кнопки с пользовательским значением отправляют событие CommandEvent управляемому элементу.

commandfor

Превращает элемент <button> в командную кнопку, управляющую заданным интерактивным элементом посредством команды, указанной в атрибуте command кнопки. Значением атрибута commandfor должен быть идентификатор управляемого элемента. Это более общий вариант атрибута popovertarget.

disabled

Этот логический атрибут не позволяет пользователю взаимодействовать с кнопкой: её нельзя нажать или сфокусировать.

form

Элемент <form>, с которым связана кнопка (её владелец формы). Значением этого атрибута должен быть id элемента <form> в том же документе. (Если этот атрибут не задан, элемент <button> связывается со своим родительским элементом <form>, если он есть.)

Этот атрибут позволяет связывать элементы <button> с элементами <form> в любом месте документа, а не только внутри элемента <form>. Он также может переопределять родительский элемент <form>.

formaction

URL-адрес, обрабатывающий данные, отправленные кнопкой. Переопределяет атрибут action формы, владельцем которой является кнопка. Ничего не делает, если у кнопки нет владельца формы.

formenctype

Если кнопка является кнопкой отправки (находится внутри элемента <form> или связана с ним и не имеет атрибута type="button"), задаёт способ кодирования отправляемых данных формы. Возможные значения:

• application/x-www-form-urlencoded: значение по умолчанию, если атрибут не используется.
• multipart/form-data: используется для отправки элементов <input>, у которых атрибуты type имеют значение file.
• text/plain: предназначено для отладки; не следует использовать при отправке реальных форм.

Если этот атрибут задан, он переопределяет атрибут enctype формы, владельцем которой является кнопка.

formmethod

Если кнопка является кнопкой отправки (находится внутри элемента <form> или связана с ним и не имеет атрибута type="button"), этот атрибут задаёт метод HTTP, используемый для отправки формы. Возможные значения:

• post: данные формы включаются в тело HTTP-запроса при отправке на сервер. Используйте этот метод, если форма содержит информацию, которая не должна быть общедоступной, например учётные данные для входа.
• get: данные формы добавляются к URL-адресу action формы, а в качестве разделителя используется ?; полученный URL-адрес отправляется на сервер. Используйте этот метод, если форма не имеет побочных эффектов, например для поисковых форм.
• dialog: этот метод указывает, что кнопка закрывает связанное с ней диалоговое окно и вовсе не передаёт данные формы.

Если этот атрибут задан, он переопределяет атрибут method формы, владельцем которой является кнопка.

formnovalidate

Если кнопка является кнопкой отправки, этот логический атрибут указывает, что при отправке формы её не нужно проверять. Если этот атрибут задан, он переопределяет атрибут novalidate формы, владельцем которой является кнопка.

Этот атрибут также доступен для элементов <input type="image"> и <input type="submit">.

formtarget

Если кнопка является кнопкой отправки, этот атрибут задаёт имя, определяемое автором, или стандартизированное ключевое слово с префиксом-подчёркиванием, указывающее, где отображать ответ на отправку формы. Это name или ключевое слово для контекста просмотра (вкладки, окна или <iframe>). Если этот атрибут задан, он переопределяет атрибут target формы, владельцем которой является кнопка. Следующие ключевые слова имеют особое значение:

• _self: загрузить ответ в тот же контекст просмотра, что и текущий. Это значение используется по умолчанию, если атрибут не задан.
• _blank: загрузить ответ в новый контекст просмотра без имени — обычно в новую вкладку или окно, в зависимости от настроек браузера пользователя.
• _parent: загрузить ответ в родительский контекст просмотра текущего. Если родительского контекста нет, этот вариант работает так же, как _self.
• _top: загрузить ответ в контекст просмотра верхнего уровня (то есть в контекст просмотра, который является предком текущего и не имеет родителя). Если родительского контекста нет, этот вариант работает так же, как _self.

interestfor

Определяет элемент <button> как инициатор интереса. Его значением является id целевого элемента, на который будет оказано влияние (обычно он будет показан или скрыт), когда пользователь проявляет или теряет интерес к элементу-инициатору (например, при наведении указателя или фокуса на него и их снятии). Подробнее и примеры см. в разделе Использование инициаторов интереса.

name

Имя кнопки, отправляемое в виде пары со значением value кнопки как часть данных формы, если эта кнопка используется для отправки формы.

popovertarget

Превращает элемент <button> в кнопку управления всплывающим окном; значением атрибута должен быть идентификатор управляемого элемента всплывающего окна. Установка связи между всплывающим окном и вызывающей его кнопкой с помощью атрибута popovertarget даёт два дополнительных полезных эффекта:

• Браузер создаёт неявную связь aria-details и aria-expanded между всплывающим окном и вызывающим его элементом, а также помещает всплывающее окно в логичное место последовательности навигации с помощью клавиатурного фокуса при его отображении. Это делает всплывающее окно более доступным для пользователей клавиатур и вспомогательных технологий (AT) (см. также раздел Функции доступности всплывающих окон).
• Браузер создаёт неявную ссылку-якорь между этими элементами, благодаря чему всплывающие окна удобно позиционировать относительно связанных с ними элементов управления с помощью якорного позиционирования CSS. Подробнее см. в разделе Якорное позиционирование всплывающих окон.

popovertargetaction

Задаёт действие, которое должно быть выполнено над элементом всплывающего окна, управляемым управляющим элементом <button>. Возможные значения:

"hide"

Кнопка скроет отображаемое всплывающее окно. Если попытаться скрыть уже скрытое всплывающее окно, действие не выполняется.

"show"

Кнопка покажет скрытое всплывающее окно. Если попытаться показать уже отображаемое всплывающее окно, действие не выполняется.

"toggle"

Кнопка переключит всплывающее окно между отображаемым и скрытым состояниями. Если всплывающее окно скрыто, оно будет показано; если оно отображается, оно будет скрыто. Если popovertargetaction не задан, "toggle" является действием по умолчанию для кнопки управления.

type

Поведение кнопки по умолчанию. Возможные значения:

• submit: кнопка отправляет данные формы на сервер. Это значение используется по умолчанию для кнопок, связанных с элементом <form>, если атрибут не задан или имеет пустое либо недопустимое значение.
• reset: кнопка сбрасывает все элементы управления до исходных значений, как и <input type="reset">. (Такое поведение часто раздражает пользователей.)
• button: у кнопки нет поведения по умолчанию, и при нажатии она ничего не делает. Клиентские скрипты могут прослушивать события элемента, которые срабатывают при возникновении соответствующих событий.

value

Определяет значение, связанное с name кнопки при отправке вместе с данными формы. При отправке формы с помощью этой кнопки значение передаётся серверу в параметрах. При использовании с командами close или request-close атрибут value задаёт значение returnValue управляемого элемента <dialog>.

Примечания

Кнопка отправки с заданным атрибутом formaction, но без связанной формы, ничего не делает. Необходимо задать владельца формы: поместить кнопку в элемент <form> или установить атрибут form равным идентификатору формы.

Стилизацию элементов <button> выполнять гораздо проще, чем элементов <input>. Можно добавлять внутреннее HTML-содержимое (например, <i>, <br> или даже <img>), а для сложного оформления использовать псевдоэлементы ::after и ::before.

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

Хотя у <button type="button"> нет поведения по умолчанию, можно задать обработчики событий, которые будут запускать нужные действия. Активированная кнопка может выполнять программируемые действия с помощью JavaScript, например удалять элемент из списка.

По умолчанию пользовательские агенты задают для кнопок стиль display: flow-root, который создаёт новый контекст блочного форматирования и выравнивает дочерние элементы кнопки по центру по горизонтали и вертикали, если они не выходят за её границы. Если кнопка задана как flex- или grid-контейнер, дочерние элементы будут вести себя как flex- или grid-элементы. Для кнопки со значением display: inline стиль будет задан так, как если бы было указано значение display: inline-block.

Доступность

Кнопки-значки

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

Чтобы задать доступное имя кнопке-значку, добавьте в элемент <button> текст, кратко описывающий назначение кнопки.

Примеры

<button name="favorite">
  <svg fill="black" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  Add to favorites
</button>

Результат

Если вы хотите визуально скрыть текст кнопки, доступный способ — использовать сочетание свойств CSS, чтобы убрать его с экрана, но оставить доступным для анализа вспомогательными технологиями.

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

• Что такое доступное имя? | Vispero
• MDN: понимание WCAG, пояснения к руководству 4.1
• Понимание критерия успеха 4.1.2 | W3C: понимание WCAG 2.0

Размер и расположение

Размер

Интерактивные элементы, например кнопки, должны иметь достаточно большую область, чтобы их было легко активировать. Это помогает самым разным людям, в том числе тем, у кого есть нарушения моторного контроля, и тем, кто использует неточные способы ввода, например стилус или пальцы. Рекомендуется, чтобы минимальный размер интерактивной области составлял 44×44 пикселя CSS.

• Понимание критерия успеха 2.5.5: размер цели | W3C: понимание WCAG 2.1
• Размер цели и критерий 2.5.5 | Adrian Roselli
• Быстрая проверка: большие сенсорные цели — проект A11Y

Расположение

Большое количество интерактивного содержимого, включая кнопки, расположенного близко друг к другу, следует разделять промежутками. Такие промежутки полезны людям с нарушениями моторного контроля, которые могут случайно активировать не тот интерактивный элемент.

Расстояние можно задать с помощью таких свойств CSS, как margin.

• Дрожание рук и проблема гигантской кнопки — Axess Lab

Информация о состоянии ARIA

Для описания состояния кнопки следует использовать атрибут ARIA aria-pressed, а не aria-checked или aria-selected. Подробнее см. информацию о роли кнопки ARIA.

Стили кнопок

Лучше не переопределять стандартную рамку фокуса у элементов, получивших фокус. Если стили кнопок переопределяются, важно обеспечить достаточный контраст состояния фокуса, чтобы люди с ослабленным зрением могли его различить, а люди с когнитивными особенностями — понять.

Псевдокласс :focus-visible можно использовать для применения стилей к элементу с :focus только тогда, когда эвристики пользовательского агента определяют, что фокус следует выделить, например когда элемент <button> получает фокус с клавиатуры. Подробнее см. в разделе :focus и :focus-visible.

Коэффициент контрастности цветов определяется сравнением яркости текста кнопки и значений цвета фона с фоном, на котором расположена кнопка. Для соответствия действующим Рекомендациям по доступности веб-контента (WCAG) коэффициент должен составлять 4,5:1 для текста и 3:1 для крупного текста. (Крупным считается текст размером не менее 18,66 px при значении bold или выше либо размером не менее 24 px.)

• WebAIM: проверка контрастности цветов
• MDN: понимание WCAG, пояснения к руководству 1.4
• Понимание критерия успеха 1.4.3 | W3C: понимание WCAG 2.0

Нажатие и фокус

Будет ли нажатие на кнопку типа <button> или <input> по умолчанию переводить её в фокус, зависит от браузера и операционной системы. Большинство браузеров фокусируют нажатую кнопку, но Safari намеренно этого не делает.

Примеры

Создание простой кнопки

В этом примере создаётся кнопка, на которую можно нажать. Атрибут type="button" гарантирует, что у кнопки не будет поведения по умолчанию. Сделать эту кнопку интерактивной можно с помощью JavaScript или таких атрибутов, как command и commandfor.

<button type="button" name="button">I'm a button</button>

Использование значения request-close для атрибута command

В диалоговом окне этого примера есть два переключателя, управляющих возможностью закрыть окно. Выберите Да или Нет, а затем нажмите Запросить закрытие, чтобы попытаться закрыть диалоговое окно. Если выбрано Да, окно закроется; если выбрано Нет, оно останется открытым и вместо этого отобразит сообщение.

<button type="button" commandfor="mydialog" command="show-modal">
  Open Dialog
</button>
<dialog id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend>Allow this dialog to close when requested?</legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no">No</label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes">Yes</label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      Request to Close
    </button>
    <p class="warning" hidden>You must choose "Yes" to close this dialog.</p>
  </div>
</dialog>

const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");

dialog.addEventListener("cancel", (e) => {
  if (!e.cancelable) return;
  if (radio.value === "no") {
    warning.hidden = false;
    e.preventDefault();
  } else {
    warning.hidden = true;
  }
});

Кнопка Открыть диалоговое окно открывает элемент <dialog> с помощью command="show-modal".

У кнопки Запросить закрытие есть command="request-close", который указывает на элемент <dialog> с помощью атрибута commandfor="mydialog". При нажатии она спрашивает элемент <dialog>, можно ли его закрыть (в отличие от атрибута command="close", который немедленно закрыл бы элемент <dialog>). Для этого с помощью события cancel проверяется, является ли <dialog> cancelable.

Когда событие cancelable, проверяются значения переключателей:

• Если установлено значение yes, диалоговое окно закрывается.
• Если установлено значение no, для предупреждения отключается атрибут hidden и вызывается метод preventDefault(), который предотвращает стандартное поведение закрытия элемента <dialog>.

Использование атрибута value с командой диалога close

В этом примере показано, как использовать атрибут кнопки value с командой close, чтобы задать значение свойства returnValue диалогового окна.

При нажатии кнопки Отмена или Удалить диалоговое окно закрывается, а его свойству returnValue присваивается значение атрибута value кнопки. Обработчик события close проверяет dialog.returnValue, чтобы определить, какое действие выбрал пользователь, и выводит результат на экран.

HTML

Сначала в HTML определяется кнопка Удалить запись, в которой атрибут commandfor указывает диалоговое окно, которое нужно открыть.

В диалоговом окне для кнопок Отмена и Удалить используется атрибут commandfor, указывающий, что они относятся к текущему диалоговому окну. Для них также задаётся атрибут command со значением "close" и атрибут value со значениями "cancel" и "delete" соответственно — значение выбранной кнопки автоматически копируется в returnValue диалогового окна при нажатии.

<button commandfor="confirm-dialog" command="show-modal">Delete Record</button>
<dialog id="confirm-dialog">
  <header>
    <h1>Delete Record?</h1>
  </header>
  <p>Are you sure? This action cannot be undone</p>
  <footer>
    <button commandfor="confirm-dialog" command="close" value="cancel">
      Cancel
    </button>
    <button commandfor="confirm-dialog" command="close" value="delete">
      Delete
    </button>
  </footer>
</dialog>

<pre id="log"></pre>

JavaScript

В коде используется обработчик события close для вывода значения returnValue диалогового окна.

const dialog = document.getElementById("confirm-dialog");

dialog.addEventListener("close", () => {
  switch (dialog.returnValue) {
    case "cancel":
      log("Cancel was clicked");
      break;
    case "delete":
      log("Delete was clicked");
      break;
    default:
      log("Closed with value:", dialog.returnValue);
  }
});

Результаты

Техническая сводка

Спецификации

Совместимость с браузерами