Тег <button>

Тег <canvas>

Синтаксис

Описание

Тег <button> (от англ. button — кнопка) используется для создания кликабельной кнопки.

Кнопка, созданная с помощью тега <button>, может быть трех типов:

submit — кнопка отправки формы;
reset — кнопка сброса данных в полях формы;
button — кнопка, действие по которой определяется скриптом.

Всегда указывайте атрибут type для тега <button>.

Примечание!

Тег <button> не является ссылкой. Для создания ссылки в виде кнопки используйте тег <a>, стилизованный с помощью CSS стилей.

Содержимым кнопки может быть как текст, так и другие HTML теги, например, используя тег <img> внутри кнопки, можно сделать кнопку-картинку.

Атрибуты, которые можно использовать в теге <button>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
autofocus	не указывается/autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку
disabled	не указывается/disabled	Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать)
form	form_id	Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы. Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к ней
formaction	URL-адрес	URL-адрес документа — обработчик формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL-адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Способ кодирования информации. Используется для кнопок с типом submit. Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут. application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на "+". Значение по умолчанию; multipart/form-data - символы не кодируются. Значение обязательно нужно использовать в форме с полем input type="file" (при использовании файлов в форме); text/plain - символы не кодируются, пробелы заменяются символом "+". Атрибут используется только в случае отправки формы методом POST. Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>
formmethod	GET POST	HTTP метод передачи данных формы. GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию. POST — передача данных в теле HTTP запроса. Используется только для кнопок с типом submit. Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>
formnovalidate	не указывается/formnovalidate	Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.д. Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>
formtarget	_blank _self _parent _top framename	Используется для кнопок с типом submit. Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом: _blank — в новой вкладке или окне; _parent — в родительском окне; _self — в текущем окне (используется по умолчанию); _top — на весь экран. Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>
name	text	Имя кнопки. Используется при передаче данных формы на сервер. Значение кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте
type	button reset submit	Тип кнопки. button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом; reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы; submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер. Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут
value	text	Значение кнопки, которое будет отправлено на сервер. На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте. К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег button</title>

</head>

<body>

<button type="button">Кнопка</button>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

button {
display: inline-block;
font: 400 13.3333px Arial;
text-align: center;
padding: 1px 6px;
background-color: buttonface;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}