Оновлено: 19.05.2025

button

Елемент <button> (від англ. button — кнопка) створює на вебсторінці кнопки і за своєю дією нагадує результат, який отримується за допомогою <input> (з атрибутом type="button | reset | submit"). На відміну від цього елемента <button> пропонує розширені можливості створення кнопок. Наприклад, на подібній кнопці можна розміщувати будь-які елементи HTML, включно із зображення. Використовуючи стилі, можна визначити вид кнопки шляхом зміни шрифту, кольору фону, розмірів та інших параметрів.

 

 

⌨️ Синтаксис

<button>...</button>

 

 

🔒 Закриваючий тег: Обов'язковий.

 

 

🔧 Атрибути

Атрибут autofocusHTML5

Визначає, що кнопка отримує фокус після завантаження сторінки.

Атрибут disabled

Блокує доступ до кнопки та її зміну.

Атрибут formHTML5

Зв'язує між собою форму та кнопку.

Атрибут formactionHTML5

Задає адресу, на яку надсилаються дані форми при натисканні на кнопку.

Атрибут formenctypeHTML5

Спосіб кодування вказаних форми.

Атрибут formmethodHTML5

Вказує спосіб пересилання вказаних форми.

Атрибут formnovalidateHTML5

Скасує перевірку форми на коректність.

Атрибут formtargetHTML5

Відкриває результат відправлення форми у новому вікні або фреймі.

Атрибут name

Визначає унікальне ім'я кнопки.

Атрибут type

Встановлює тип кнопки: звичайна; для надсилання даних форми на сервер; для очищення форми.

Атрибут value

Значення кнопки, яке буде надіслано на сервер або прочитано за допомогою скриптів.

Також для цього тексту доступні універсальні атрибути та події.

 

 

📋 Приклад

<!DOCTYPE HTML>
<html>
  <head>
   <metacharset="utf-8">
   <title>BUTTON</title>
  </head>
  <body>
   <p style="text-align: center"><button>Button with text</button>
   <button><img src="image/umbrella.gif" alt="Umbrella"
           style="vertical-align: middle"> Graphic button</button></p>
  </body>
</html>