HTML Кнопки
Кнопки дозволяють користувачам взаємодіяти з вебсторінкою. Вони можуть надсилати форми, запускати JavaScript або запускати різні дії при натисканні.
HTML Кнопка
Як зробити кнопку в HTML? Дуже просто! HTML-елемент <button> визначає кнопку, на яку можна натискати.
Сама по собі кнопка нічого не робить, поки ви не додасте до неї дію.
Стилізація HTML кнопок
Кнопки часто стилізуються за допомогою CSS:
Вимкнені кнопки
Використайте атрибут disabled, щоб зробити кнопку неклікабельною:
Підказка: Вимкнені кнопки неможливо натиснути, і вони зазвичай виглядають бляклими.
Кнопка з JavaScript
Ви можете запускати JavaScript, коли користувач натискає кнопку, використовуючи атрибут onclick:
Примітка: Ви дізнаєтесь більше про JavaScript у розділі HTML JavaScript на нашому сайті W3Schools українською.
Типи кнопок
Атрибут type визначає, що робить кнопка після натискання. Існує три типи кнопок:
type="button"- Звичайна кнопка, на яку можна натиснути (за замовчуванням нічого не робить)type="submit"- Надсилає формуtype="reset"- Скидає всі поля форми
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Кнопки часто використовуються всередині форм, про які ви дізнаєтеся більше в наступному розділі.
Наразі просто знайте, що кнопка submit надсилає дані форми на сервер, тоді як кнопка reset очищує форму:
Приклад
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Спробуйте самі »
Примітка: Завжди слід вказувати атрибут type. Усередині форми тип за замовчуванням — submit, і браузери можуть поводитися інакше, якщо цей type пропустити.
Кнопка чи посилання?
Коли використовувати <a> (посилання)?
Тег <a> створює гіперпосилання. Він використовується коли потрібно перейти на іншу сторінку або на інший розділ сторінки.
Правило: Якщо дія — це перехід, використовуйте тег <a>.
Приклад
<a href="https://example.com">Перейти на інший сайт</a>
Або для переходу на якийсь розділ сторінки:
Приклад
<a href="#contact">До контакту</a>
Коли використовувати <button> (кнопку)?
Тег <button> створює елемент, який виконує дію на тій самій сторінці — наприклад, надсилання форми, відкриття спливаючого вікна (модалки), запуск JavaScript.
Правило: Якщо дія — це запуск події на сторінці, використовуйте <button>.
Приклад - надсилання форми:
<form>
<input type="text" placeholder="Ваше імʼя">
<button type="submit">Відправити</button>
</form>
або
Приклад - кнопка для JavaScript (відкриття модалки):
<button onclick="openModal()">Відкрити модалку</button>
<script>
function openModal() {
alert("Модалка відкрита");
}
</script>
Кнопка з іконкою в HTML
Усередині тега <button> можна розміщувати будь-який HTML-контент: текст, зображення (<img>), SVG-іконки або їх комбінацію. Це стандартна і правильна практика.
Іконка через <img>
Найпростіший варіант — вставити зображення всередину кнопки.
Приклад
<button>
<img src="icon-save.png" alt="" width="16" height="16">
Зберегти
</button>
Пояснення:
<img>вставляється так само як звичайний текст.- обов’язковий атрибут
alt=""залишають порожнім, якщо поруч є текст (інакше скрінрідери читатимуть зайве). - розмір іконки зазвичай задають через width / height або CSS.
Кнопка лише з іконкою
Якщо кнопка без тексту, потрібно додати пояснення для доступності - aria-label="".
Приклад
<button aria-label="Пошук">
<img src="icon-search.png" alt="">
</button>
Іконка через SVG (рекомендовано)
Іконка через SVG — найкращий варіант: чіткий на будь-якому екрані, легко стилізується через CSS.
Приклад
<button>
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2"/>
</svg>
Додати
</button>
Переваги SVG:
- Не розмивається;
- Наслідує колір тексту (currentColor);
- Не потребує окремого файлу.
Типова помилка
❌ Неправильно:
<a href="#">
<button>OK</button>
</a>
✔ Правильно:
<button>
<img src="icon-ok.png" alt="">
OK
</button>
Коротко:
<button>може містити іконки, текст і SVG<img>— просто і зрозуміло- SVG — сучасно і правильно
- Кнопка без тексту → aria-label обов’язково
HTML Довідник з кнопок
| Тег | Опис |
|---|---|
| <button> | Визначає кнопку, на яку можна натиснути |
Підказка: Щоб переглянути повний список усіх тегів HTML, відвідайте Довідник з HTML-тегів.
Атрибути кнопки
| Атрибут | Значення | Опис |
|---|---|---|
| type |
button submit reset |
Визначає тип кнопки. За замовчуванням — submit |
| name | текст | Ім’я кнопки, яке надсилається разом із формою |
| value | текст | Значення кнопки, яке надсилається на сервер |
| disabled | disabled | Вимикає кнопку — вона стає неактивною |
| autofocus | autofocus | Автоматично встановлює фокус на кнопку при завантаженні |
| form | ID форми | Прив’язує кнопку до форми, навіть якщо вона поза <form> |
| formaction | URL | URL для надсилання даних (перевизначає action форми) |
| formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Тип кодування даних форми |
| formmethod |
get post |
Метод надсилання форми |
| formnovalidate | formnovalidate | Вимикає валідацію при надсиланні |
| formtarget |
_self _blank _parent _top |
Де відкривати результат надсилання |
| popovertarget | ID елемента | Прив’язує кнопку до popover-елемента |
| popovertargetaction |
toggle show hide |
Дія для popover-елемента |
❓ FAQ (Питання та відповіді по уроку)
Для чого потрібні кнопки на вебсторінці?
Кнопки дозволяють користувачам взаємодіяти з вебсторінкою. Вони можуть надсилати форми, запускати JavaScript або запускати різні дії при натисканні.
Який html-елемент на вебсторінці визначає кнопку, на яку можна натискати?
Елемент HTML <button> визначає кнопку, на яку можна натискати. Сама по собі кнопка нічого не робить, доки ви не додасте до неї дію.
За допомогою чого стилізуються кнопки на вебсторінці?
Кнопки на вебсторінці найчастіше стилізуються за допомогою CSS.
Який використовується атрибут, щоб зробити кнопку на вебсторінці ненатискальною (неклікабельною)?
Щоб зробити кнопку ненатискальною, використовуйте атрибут disabled. Вимкнені кнопки не можна натискати, і вони зазвичай виглядають бляклими.
Який атрибут використовується, щоб запускати JavaScript, коли користувач натискає кнопку?
Щоб запустити JavaScript, коли користувач натискає кнопку, використовується атрибут onclick.
Які існують типи кнопок на вебсторінці?
Існує три типи кнопок:
- type="button" - Звичайна кнопка, на яку можна натискати (за замовчуванням нічого не робить)
- type="submit" - Надсилає форму
- type="reset" - Скидає всі поля форми
Для чого найчастіше використовуються кнопки на вебсторінці?
Найчастіше кнопки на вебсторінці використовуються всередині форм:
- Кнопка надсилання надсилає дані форми на сервер;
- Кнопка скидання очищає форму.
Який сайт українською мовою є найкращим для вивчення HTML онлайн?
Найкращим сайтом для вивчення HTML є сайт W3Schools українською.
