/html/button:> Интерактивная кнопка_

Элемент button

Синтаксис

(X)HTML
<button> ... </button>

Описание

Элемент button (от англ. "button" ‒ «кнопка») cоздаёт в документе интерактивные кнопки. По своему значению элемент button похож на элемент input, но в отличии от input элемент button может отображать на кнопке почти все элементы (кроме элемента карты) вкладываемые в данный элемент.

Примечание

Если предполагается, что с помощью кнопки button на сервер будут отправляться данные формы, то эту кнопку либо располагают внутри формы (элемент form), либо если нет такой возможности (допустим, что форма и кнопка располагаются в разных частях документа) присоединяют к форме с помощью атрибута «form».

Совет

Для корректности работы кнопки во всех браузерах, желательно в данном элементе указывать атрибут «type» с соответствующим значением.


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 17.5 The BUTTON element
DTD: Transitional Strict Frameset
5.0 4.10.6 The button element
5.1 4.10.6. The button element
XHTML
1.0 Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1 Extensible HyperText Markup Language

Атрибуты

autofocus
Получение кнопкой фокуса после загрузки страницы.
disabled
Блокирует кнопку.
form
Присоединяет кнопку к форме (с помощью значения параметра «id» присоединяемой формы).
formaction
URL-адрес обработчика формы.
formenctype
Способ кодирования данных формы перед отправкой.
formmethod
Метод передачи данных формы.
formnovalidate
Запрещает проверку данных формы на корректность.
formtarget
Указывает место, в котором должен быть открыт результат отправки данных формы.
menu
Присваивает интерактивной кнопке всплывающее меню.
name
Имя кнопки.
type
Тип кнопки.
value
Значение кнопки (отправляется вместе с данными формы на сервер).
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент button</title>
<link type="text/css" href="ex-style.css" rel="stylesheet">
</head>
<body>
<h1>Пример с элементом "button"</h1>
<!-- Создаём форму, поле ввода и две кнопки "очистить" и "отправить" -->
<form action="/examples/php-scripts/FIE.php" method="get">
<p>Введите ваше имя: <input type="text" name="first_name"></p>
<p>
<button type="reset">Очистить</button>
<button type="submit"><img src="http://programmerbook.ru/favicon.ico" alt="Эмблема сайта">Отправить</button>
</p>
</form>
</body>
</html>
Элемент button