Тег <button> HTML кнопка

Рейтинг: 4 из 5, голосов 17

28 декабря 2019 г.

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

Кнопка, созданная с помощью тега button, может быть одного из трех типов: submit - кнопка отправки формы, reset - кнопка сброса данных в полях формы, button - кликабельная кнопка, действие по которой определяется скриптом.

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

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

Кнопка <button>, как и тег <input>, может быть использована как кнопка отправки HTML форм. Для этого кнопка должна иметь тип submit, находиться внутри HTML кода формы <form> или быть привязанной к форме с помощью атрибута form.

Тег <button> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

<button>контент кнопки</button>

Примеры использования кнопки <button>

Стандартная HTML кнопка

HTML код стандартной кнопки <button>

<button type="button" name="show_more">Показать еще</button>

Кнопка button стилизованная с помощью CSS

HTML код стилизованной кнопки <button>

<style type="text/css"> 
  button[name="run_script"] { 
    border: none;
    border-radius: 7px;
    padding: 10px 25px;
    background: #ff9900;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
  }
  button[name="run_script"]:hover { 
    background: #ff6600;
  } 
</style>
<button type="button" name="run_script">Запустить скрипт</button>

Кнопка - картинка с помощью тега button

В примере показано как будет выглядеть изображение <img>, вставленное внутрь кнопки button без изменения стилей. Вы всегда можете изменить стили с помощью CSS.

HTML код кнопки - картинки

<button type="button" name="turn_off">
  <img src="/images/turn_off.png" alt="Выключатель" title="Выключатель" width="40" height="40">
</button>

Кнопка <button> в HTML коде страницы

В примере показано использование кнопки <button> в качестве кнопки отправки формы (тип submit).

HTML код примера

<!DOCTYPE html>
<html>
  <head>
    <title>Кнопка button в коде HTML формы</title>
  </head>
  <body>
    <form name="contacts" method="POST" action="/example.php">
      <input type="text" name="name" placeholder="Ваше имя" />
      <input type="tel" name="phone" placeholder="Ваш телефон" />
      <button type="submit" name="submit_button" value="main_button">Отправить</button>
    </form>
  </body>
</html>

Кнопки button и input в чем отличие?

Как тег <button>, так и тег <input> позволяют создавать кликабельные кнопки типа button, submit и reset.

Разница между кнопкой, созданной с помощью тега <button> и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input, придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type="image". Возможности использовать HTML теги внутри в кнопке input нет.

Браузеры могут по разному устанавливать тип кнопки по умолчанию, поэтому, для обеспечения кроссбраузерности, стоит всегда использовать атрибут type.

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

Тег
<button>	Да	Да	Да	Да	Да

Атрибуты тега button

Атрибут	Значения	Описание
autofocus	не указывается / autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.
disabled	не указывается / disabled	Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).
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 запроса. Подробнее про методы GET и POST. Используется только для кнопок с типом submit. Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.
formnovalidate	не указывается / formnovalidate	Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п. Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.
formtarget	_blank _paren _self _top имя фрейма	Используется для кнопок с типом submit. Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом: _blank - в новой вкладке или окне; _parent - в родительском окне; _self - в текущем окне (используется по умолчанию); _top - на весь экран. Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.
name	текст	Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.
type	button reset submit	Тип кнопки. button - простая кликабельная кнопка, действие по нажатию которой определяется скриптом; reset - кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы; submit - кнопка отправки формы. Выполняет отправку связанной формы на сервер. Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут.
value	текст	Значение кнопки, которое будет отправлено на сервер. На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте. К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.

Тег <button> также поддерживает глобальные HTML атрибуты.

by Lebedev