Тег <button>

Синтаксис

<button type="...">...</button>

Описание

Тег <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>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <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;
}

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<button> Да Да Да Да Да