Элемент button
Синтаксис
<button> ... </button>
Описание
Элемент button (от англ. "button" ‒ «кнопка») cоздаёт в документе интерактивные кнопки. По своему значению элемент button похож на элемент input, но в отличии от input элемент button может отображать на кнопке почти все элементы (кроме элемента карты) вкладываемые в данный элемент.
Примечание
Если предполагается, что с помощью кнопки button на сервер будут отправляться данные формы, то эту кнопку либо располагают внутри формы (элемент form), либо если нет такой возможности (допустим, что форма и кнопка располагаются в разных частях документа) присоединяют к форме с помощью атрибута «form».
Совет
Для корректности работы кнопки во всех браузерах, желательно в данном элементе указывать атрибут «type» с соответствующим значением.
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| 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
- Указывает место, в котором должен быть открыт результат отправки данных формы.
- name
- Имя кнопки.
- type
- Тип кнопки.
- value
- Значение кнопки (отправляется вместе с данными формы на сервер).
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
<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>