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

Рейтинг: 5 из 5, голосов 2
+++++

Тег <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.

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<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 атрибуты.

Оцените, насколько полезна эта страница
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.