<button>: Элемент кнопки

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

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

К атрибутам этого элемента относятся глобальные атрибуты.

autofocus

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

disabled

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

form

Элемент <form>, с которым ассоциируется кнопка (ее владелец формы). Значение этого атрибута должно быть id элементом <form> в том же документе. (Если этот атрибут не задан, кнопка ассоциируется со своим родительским элементом <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 формы, разделенные ? разделителем, и полученный URL отправляется на сервер. Используйте этот метод, когда форма не имеет побочных эффектов, например, поисковые формы.
• dialog: Этот метод используется для указания того, что кнопка закрывает связанное с ней диалоговое окно диалоговое окно и не передает данные формы вообще.

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

formnovalidate

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

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

formtarget

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

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

name

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

popovertarget

Превращает элемент <button> в кнопку управления всплывающим окном; принимает ID элемента всплывающего окна для управления в качестве значения. Более подробную информацию см. на странице приземления API всплывающего окна.

popovertargetaction

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

"hide"

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

"show"

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

"toggle"

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

type

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

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

value

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

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

Элементы <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 aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>

Результат

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

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

• Что такое доступное имя? | The Paciello Group
• 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
• Быстрый тест: большие сенсорные цели - The A11Y Project

Близость

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

Пространство можно создать, используя свойства CSS, такие как margin.

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

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

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

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

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

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

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