<button>: Елемент кнопки
Елемент HTML <button>
(кнопка) – інтерактивний елемент, що активується користувачем за допомогою миші, клавіатури, пальця, голосової команди чи іншої допоміжної технології. Бувши активованою, кнопка виконує дію, наприклад, подання форми чи відкриття діалогу.
Усталено кнопки HTML подаються в стилі, що нагадує стиль платформи, на котрій працює користувацький агент, але вигляд кнопок можна змінити за допомогою CSS.
Спробуйте його в дії
Атрибути
Атрибути цього елемента включають глобальні атрибути.
autofocus
Цей булів атрибут вказує, що кнопка повинна отримати фокус введення, коли сторінка завантажилась. Лише один елемент в документі може мати такий атрибут.
disabled
Цей булів атрибут не дає користувачеві взаємодіяти з кнопкою: вона не може бути натиснута чи отримати фокус.
form
Елемент
<form>
, з яким кнопка повинна бути пов'язана (її форма-власник). Значення цього атрибута мусить дорівнювати значенню атрибутаid
елемента<form>
у тому самому документі. (Якщо цей атрибут не вказаний, то<button>
пов'язується з елементом<form>
, що є її предком, якщо такий є.)Цей атрибут дає змогу пов'язувати елементи
<button>
з елементами<form>
, що знаходяться будь-де в елементі, а не лише тими, в котрих<button>
знаходиться. Також таке пов'язування відкидає зв'язок з елементом<form>
, що є предком<button>
.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
: Дані форми додаються в кінець URLaction
форми, відділені?
, і результівний URL надсилається на сервер. Цей метод слід використовувати, коли форма не має побічних ефектів, наприклад, коли це форма пошуку.dialog
: Цей метод використовується для позначення того, що ця кнопка закриває діалог, з яким пов'язана, і не передає дані форми взагалі.
Коли вказаний, то відкидає атрибут
method
форми-власника кнопки.formnovalidate
Якщо кнопка є кнопкою подання, то цей булів атрибут вказує, що форма не повинна бути перевірена при поданні. Якщо вказаний цей атрибут, то він відкидає атрибут
novalidate
форми-власника кнопки.Цей атрибут також доступний на елементах
<input type="image">
й<input type="submit">
.formtarget
Якщо кнопка є кнопкою подання, то цей атрибут є визначеним автором іменем чи стандартизованим ключовим словом, що починається з підкреслення, котре вказує, де показувати відповідь на подання форми. Це
name
чи ключове слово на позначення контексту перегляду (вкладки, вікна чи<iframe>
). Якщо цей атрибут вказаний, то він відкидає атрибутtarget
форми-власника кнопки. Наступні ключові слова мають особливі значення:_self
: Завантажує відповідь у той самий контекст перегляду, що й поточний. Це значення є усталеним, коли атрибут не заданий._blank
: Завантажує відповідь у новий безіменний контекст перегляду – зазвичай нову вкладку чи вікно, залежно від налаштувань браузера користувача._parent
: Завантажує відповідь у контекст перегляду, що є батьківським відносно поточного. Якщо батьківського контексту немає, то результат такий самий, як при використанні значення_self
._top
: Завантажує відповідь у контекст перегляду вищого рівня (тобто такий контекст перегляду, що є предком відносно поточного, а сам батьківського контексту не має). Якщо батьківського контексту немає, то результат такий самий, як при використанні значення_self
.
name
Ім'я кнопки, котре подається в парі зі значенням атрибута
value
як частина даних форми, коли ця кнопка використовується для її подання.popovertarget
Перетворює елемент
<input type="button">
на контрольну кнопку спливного віконця; приймає ідентифікатор елемента спливного елемента, котрим керуватиме, як своє значення. Детальніше дивіться на сторінці Popover API.popovertargetaction
Задає дію, котра буде виконана над спливним елементом, котрим керує контрольний елемент
<input type="button">
. Можливі значення:"hide"
Ця кнопка приховує показане спливне віконце. Якщо спробувати приховати вже приховане спливне віконце, то ніяких дій не буде виконано.
"show"
Ця кнопка показує приховане спливне віконце. Якщо спробувати показати вже показане спливне віконце, то ніяких дій не буде виконано.
"toggle"
Ця кнопка перемикає спливне віконце між показом і приховуванням. Якщо спливне віконце приховане, то воно буде показано; якщо спливне віконце показане, то воно буде приховано. Якщо
popovertargetaction
відсутній, то"toggle"
є усталеною дією, котра буде виконана контрольною кнопкою.
type
Усталена поведінка кнопки. Можливими значеннями є:
submit
: Кнопка подає дані форми на сервер. Це усталена поведінка для пов'язаних з<form>
кнопок, коли цей атрибут не вказаний, або ж якщо він має пусте чи недійсне значення.reset
: Кнопка скидає усі контрольні елементи до їх початкових значень, подібно до <input type="reset">. (Така логіка має тенденцію дратувати користувачів.)button
: Кнопка не має усталеної поведінки й нічого не робить, коли на неї натискають. Можуть бути клієнтські сценарії, що слухають події елемента.
value
Визначає значення, асоційоване з
name
кнопки, коли вона подається разом з даними форми. Це значення передається серверу в параметрах, коли форма подається за допомогою цієї кнопки.
Примітки
Кнопка подання з атрибутом formaction
, але без пов'язаної з нею форми – нічого не робить. Треба задати їй форму-власника, або обгорнувши в <form>
, або задавши її атрибуту form
значення ідентифікатора форми.
Елементи <button>
набагато простіше оформлювати, ніж елементи <input>
. Можна додати HTML всередину (припустімо, <i>
, <br>
чи навіть <img>
), а також використати для складної візуалізації псевдоелементи ::after
і ::before
.
Якщо кнопки не призначені для подання даних форми на сервер, слід пересвідчитись, що вони мають атрибут type
зі значенням button
. Інакше вони спробують подати дані форми й завантажити (відсутню) відповідь, можливо, руйнуючи поточний стан документа.
Хоч <button type="button">
не має усталеної поведінки, сценарії можуть додавати обробники подій, котрі реалізують якусь логіку. Активована кнопка може виконувати програмовані дії, описані мовою JavaScript, як то усунення елемента зі списку.
Усталено користувацькі агенти стилізують кнопки як display: flow-root
, що породжує новий контекст блокового форматування та центрує нащадків кнопки як по горизонталі, так і по вертикалі, якщо не відбувається переповнення. Якщо кнопка визначена як гнучкий або сітковий контейнер, то її дочірні елементи поводяться як гнучкі або сіткові елементи. Кнопка, котрій задано 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>
Додати до улюблених
</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 | Адріан Розеллі
- Швидка перевірка: Великі мішені дотику - The A11Y Project
Суміжність
Велика кількість інтерактивного вмісту – включно з кнопками – бувши розташованою в тісній суміжності елемент відносно елемента, повинна мати розділовий простір. Такі відступи корисні для людей, котрі мають розлади контролю руху, що можуть випадково активувати не той інтерактивний вміст.
Відступи можуть бути створені за допомогою властивостей CSS, наприклад, margin
.
Інформація про стан ARIA
Щоб описати стан кнопки, коректним атрибутом ARIA є aria-pressed
, а не aria-checked
чи aria-selected
. Щоб дізнатися більше, читайте інформацію про роль кнопки ARIA.
Стилі кнопок
Найкраще не перевизначати усталене кільце фокуса для елементів, що мають фокус. Якщо стилі кнопки перевизначені, то важливо пересвідчитися, що стан фокуса має достатній контраст, аби люди, що мають послаблений зір, могли його помітити, а ті, хто має мисленнєві особливості, могли його зрозуміти.
Псевдоклас :focus-visible
може вживатися для застосування стилів до елемента, що має :focus
, але лише тоді, коли евристика користувацького агента визначила, що фокус слід виділити, наприклад, коли <button>
отримує фокус за допомогою клавіатури. Дивіться більше в :focus або :focus-visible
Співвідношення колірного контрасту визначається порівнянням світності тексту кнопки й кольору тла зі тлом, на котрому розташована кнопка. Для виконання нинішніх Настанов з доступності вебвмісту (WCAG) потрібне співвідношення 4.5:1 для текстового вмісту і 3:1 для великого тексту. (Великий текст – визначений як 18.66px і грубий
чи більший, або 24px чи більший.)
- WebAIM: Перевірка колірного контрасту
- MDN розуміння WCAG, пояснення Настанов 1.4
- Розуміння критерію успіху 1.4.3 | W3C Розуміння WCAG 2.0
Клацання й фокус
Те, чи передасть клацання кнопки <button>
або <input>
цій кнопці фокус, залежить від браузера й операційної системи. Більшість браузерів – це робить, але Safari – ні, і це не помилка.
Приклади
<button name="button">Натисніть мене</button>
Технічний підсумок
Категорії вмісту | Потоковий вміст, оповідальний вміст, інтерактивний вміст, перелічений, підписуваний та подаваний пов'язаний з формою елемент, відчутний вміст. |
---|---|
Дозволений вміст | Оповідальний вміст, але не повинно бути інтерактивного вмісту |
Пропуск тега | Немає; і початковий, і кінцевий теги – обов'язкові. |
Дозволені батьківські елементи | Будь-який елемент, що приймає оповідальний вміст. |
Неявна роль ARIA |
button
|
Дозволені ролі ARIA |
checkbox , combobox , link , menuitem , menuitemcheckbox , menuitemradio , option , radio , switch , tab
|
Інтерфейс DOM | HTMLButtonElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-button-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
button
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
autocomplete
|
Chrome No support Ні | Edge No support Ні | Firefox Full support Так | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support Так | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
disabled
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
form
|
Chrome Full support Так | Edge Full support 16 | Firefox Full support Так | Internet Explorer No support Ні | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
formaction
|
Chrome Full support 9 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 10 | Opera Full support 15 | Safari Full support 5.1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Full support 5 | Samsung Internet Full support 1.0 |
formenctype
|
Chrome Full support 9 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 10 | Opera Full support 10.6 | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Сумісність невідома; будь ласка, оновіть. ? | Samsung Internet Full support 1.0 |
formmethod
|
Chrome Full support 9 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 10 | Opera Full support 15 | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Сумісність невідома; будь ласка, оновіть. ? | Samsung Internet Full support 1.0 |
formnovalidate
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
formtarget
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
name
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
value
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |