Тег <button>

IE
8.0+
Chrome
1.0+
Opera
6.0+
Safari
1.0+
Firefox
1.0+
Android
1.0+
iOS
1.0+

Тег <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>
	<style>
		form {text-align:center; margin-bottom:20px;}
		button img {vertical-align: middle;}
	</style>
 </head>
 <body>
	<form>
	<button>Кнопка с текстом</button>
	</form>

	<form>
	<button><img src="/assets/images/coffee.png" alt="">Заказать</button>
	</form>
 </body>
</html>

Результат данного примера показан на рисунке ниже:

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

Браузеры

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

Категория: Универсальные элементы, Формы

Статьи по теме

Кнопки