Описание

Тег <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 — Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Закрывающий тег

Обязателен.

Пример

<!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.

Вид кнопок в браузере Safari

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.