Коли слід використовувати елемент button, html

Ви використовуєте його, хм. ну, коли хочете розмістити на сторінці кнопку, по якій користувач може натиснути, чи не так? На жаль, все трохи складніше. В принципі це близько до істини, але давайте вивчимо питання глибше.

Сам елемент виглядає таким чином:

елемент сам по собі, не може цього зробити. Було багато розмов про те, щоб дозволити «href всюди», але нічого з цього так і не вийшло.

При натисканні на кнопку дійсно виробляються певні дії, якщо використовується відповідний контекст.

Кнопка - це елемент форми

Веб-форми можуть містити кнопки для виконання (підтвердження) дій. Ви можете подумати, що це виглядає приблизно так:

Елемент в оболонці

, за замовчуванням, поводиться саме так, як і показано вище.

Однак форми також можуть мати кнопки скасування. Ви можете дублювати вид дії кнопки, змінивши поведінку за замовчуванням з виконання (підтвердження) дії на скасування:

Натискання на цю кнопку приведе до видалення всіх інших полів введення (і текстових областей) з батьківського блоку

.

Кнопки можуть містити контент

Основною причиною використання елемента

є те, що він містить і відкривається, і закривається теги (). А це означає, що його можна розмежувати з будь-яким іншим кодом. На практиці часто виникає така ситуація:

Поки буде зберігатися. цей змішаний контент буде відображатися на екрані.

Наскільки я можу судити, не існує особливих обмежень щодо того, що ви можете розмістити всередині кнопки, так що ви можете помістити туди що завгодно, створивши дійсно химерні кнопки. Можливе використання також і псевдо елементів.

Давайте залишимо поки тему стилів для

, хоча різні браузери зазвичай мають спеціальні стилі, які застосовуються до кнопок. Якщо захочете, ви можете залишити стилі, що застосовуються браузерами, або ж повністю видалити їх, і тоді ваш стиль за замовчуванням буде замінювати стилі браузерів.

Врахуйте: «якщо кнопка не має валидного href, це просто елемент»

Пам'ятайте, раніше я писав, що ця тема приносить мені справжню насолоду. Це те, що надихнуло мене на написання цієї статті. Я уявляв собі, яке задоволення отримаю, розглядаючи різні казуси. Як наприклад:

Якщо вам не подобаються ці безглузді посилання, для

існує непогана альтернатива. Але, на жаль, поза контекстом блоку

як і раніше залишається безглуздим елементом.

Однак

все одно, здається, краще

Навіть якщо

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

Але ми можемо зробити наступне:

Коли доцільніше використовувати посилання

Це прогресивне поліпшення в кращому його застосуванні. наприклад:

пов'язані проблеми

Припустимо, ви використовували анкорний посилання. Але тільки ви вирішили похвалити себе за те, що йдете в ногу з часом і використовуєте прогресивне поліпшення, як виникають деякі проблеми.

У вас може вийти щось схоже на те, що вийшло у мене!

Але ви самі ще не зовсім в порядку. MDN докладно розглядає дану проблему:

Зверніть увагу: Будьте обережні при розмітці посилань з функціями кнопки. Дії кнопки, як правило, викликаються за допомогою клавіші «Пропуск», в той час як дії посилань викликаються через клавішу Enter.

Іншими словами, коли ви використовуєте посилання, які повинні вести себе, як кнопки, додавання тільки role = "button" недостатньо.

Також необхідно буде додати ключ обробника дій, який буде реагувати на натискання клавіші «Пропуск», щоб забезпечити відповідність з оригінальною кнопкою.

Що виходить? Ви активуєте посилання і кнопки з різними ключами. Тому прийміть це до уваги.

Ну що ж, на цьому все. І хм. робіть інтерактивні речі правильно.

Переклад статті «When To Use The Button Element» був підготовлений дружною командою проекту Сайтобудування від А до Я.