Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0 + | 8.0 + | 1.0 + | 6.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Специфікація
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Опис
Тег <button> створює на веб-сторінці кнопки і за своєю дією нагадує результат, одержаний за допомогою тега <input> (з атрибутом type="button | reset | submit" ). На відміну від цього тега, <button> пропонує розширені можливості по створенню кнопок. Наприклад, на подібній кнопці можна розміщувати будь-які елементи HTML, в тому числі зображення. Використовуючи стилі можна визначити вигляд кнопки шляхом зміни шрифту, кольору фону, розмірів і інших параметрів.
Теоретично, тег <button> повинен розташовуватися усередині форми, яка встановлюється елементом <form> . Проте, браузери не виводять повідомлення про помилку і коректно працюють з тегом <button> , якщо він зустрічається самостійно. Однак, якщо необхідно результат натискання на кнопку відправити на сервер, поміщати <button> в контейнер <form> обов'язково.
Синтаксис
<form> <button> ... </button> </form>
Атрибути
- accesskey
- Доступ до елементів форми за допомогою гарячих клавіш.
- autofocus
- Встановлює, що кнопка отримує фокус після завантаження сторінки.
- disabled
- Блокує доступ і зміна елемента.
- form
- Пов'язує між собою форму і кнопку.
- formaction
- Задає адреса, на який пересилаються дані форми при натисканні на кнопку.
- formenctype
- Спосіб кодування даних форми.
- formmethod
- Вказує метод пересилання даних форми.
- formnovalidate
- Скасовує перевірку форми на коректність.
- formtarget
- Відкриває результат відправки форми в новий м вікні або фреймі.
- name
- Визначає унікальне ім'я кнопки.
- type
- Тип кнопки — звичайна, для відправки даних форми на сервер або для очищення форми.
- value
- Значення кнопки, яке буде відправлено на сервер або прочитано з допомогою скриптів.
Також для цього тега доступні універсальні атрибути і події .
Закриваючий тег
Обов'язковий.
Приклад
HTML5 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Тег BUTTON </title> </head> <body> <p style="text-align: center"> <button> Кнопка з текстом </button> <button> <img src="images/umbrella.gif" alt="Парасолька" style="vertical-align: middle"> Кнопка з малюнком </button> </p> </body> </html>
Результат даного прикладу показаний на рис. 1.
Браузери
Internet Explorer до версії 7.0 включно не підтримує атрибут value .