Тег <button>

Тег <button> (укр. – “кнопка ”) використовується для створення інтерактивних кнопок на веб-сторінці. Він є універсальним елементом для виконання дій, таких як відправлення форм, запуск скриптів або виконання інших інтерактивних функцій.

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

Атрибути

Специфічні атрибути

• type — визначає тип кнопки. Можливі значення:
  • button — звичайна кнопка, яка використовується для виконання дій за допомогою JavaScript.
  • submit — кнопка для відправлення форми.
  • reset — кнопка для очищення всіх полів форми.

Наприклад:

<button type="submit">Надіслати</button>

• disabled — робить кнопку недоступною для взаємодії. При цьому стилі кнопки зазвичай змінюються для візуального відображення недоступності. Наприклад:

<button type="button" disabled>Недоступна кнопка</button>

• name — задає ім’я кнопки, яке використовується при відправленні форми. Наприклад:

<button type="submit" name="action" value="send">Надіслати</button>

• value — задає значення кнопки, яке надсилається разом із формою. Наприклад:

<button type="submit" name="action" value="save">Зберегти</button>

Глобальні атрибути

Тег <button> підтримує всі глобальні атрибути HTML, включаючи:

• id — унікальний ідентифікатор для кнопки. Наприклад:

<button id="submit-btn">Надіслати</button>

• class — задає клас для кнопки, що використовується для стилізації через CSS. Наприклад:

<button class="primary-btn">Надіслати</button>

• style — інлайн-стилізація кнопки. Наприклад:

<button style="background-color: blue; color: white;">Натисніть мене</button>

• title — підказка, яка відображається при наведенні курсору на кнопку. Наприклад:

<button title="Натисніть, щоб відправити дані">Надіслати</button>

• lang — визначає мову для тексту всередині кнопки. Наприклад:

<button lang="uk">Натисніть тут</button>

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

<form>
  <!-- Кнопка для відправки форми -->
  <button type="submit">Надіслати</button>

  <!-- Кнопка для скидання полів форми -->
  <button type="reset">Очистити</button>

  <!-- Звичайна кнопка з використанням JavaScript -->
 <button type="button" class="primary-btn">Надіслати</button>
</form>

Додаткові моменти

• Тег <button> може містити будь-який HTML-контент.
• Використовуйте атрибути aria-label або aria-labelledby для покращення доступності кнопок.
• Для покращення зовнішнього вигляду кнопок застосовуйте CSS.
• Кнопки часто використовуються для взаємодії з JavaScript.
• Використовуйте <button> замість <a> для дій, які не є навігацією, щоб відповідати семантиці HTML.
• Уникайте використання кнопок в формах без атрибуту type, оскільки за замовчуванням вони вважаються кнопками відправки форми (type="submit").