HTML тег <button>

Тег <button> используется для создания интерактивных кнопок на веб-странице. В отличие от одинарного тега <input> (с атрибутом type=”button”), при помощи которого также можно создавать кнопки, содержимым тега <button> может быть как текст, так и изображение.

Если вы хотите создать кнопку в HTML форме, используйте элемент <input>, так как браузеры по-разному отображают содержимое тега <button>. К примеру, Internet Explorer отобразит текст между тегами <button> и </button>, в то время как другие браузеры покажут содержимое атрибута value.

Синтаксис

Содержимое тега пишется между открывающим <button> и закрывающим </button> тегами.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок документа</title>
   </head>
   <body>
	<h1>Вот наша кнопка..</h1>
	<button type="button">Нажать</button>
   </body>
</html>

Результат

Использование CSS стилей

К тегу <button> можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    Обычная кнопка
    <button type="button">Добавить в корзину</button>
    <hr />
    Кнопка с красным текстом
    <button type="button" style="color: red;"><b>Книга HTML</b></button>
    <hr />
    Кнопка с увеличенным размером шрифта
    <button type="button" style="font: bold 14px Arial;">Загрузить книгу </button><br />
  </body>
</html>

Результат

Атрибуты

У тега <button> нет обязательных атрибутов, однако мы рекомендуем всегда использовать атрибут type=”button”, если тег используется в качестве обычной кнопки.

Атрибут Значение Описание
autofocus autofocus Указывает браузеру, что кнопка должна получить фокус после загрузки страницы.
disabled disabled Деактивирует кнопку. (Используется в случае, когда кнопка должна стать активной после выполнения какого-либо действия.)
form form_id Указывает форму, к которой относится кнопка. Если кнопка относится к нескольким формам, то их идентификаторы (form_id) должны быть разделены пробелами. Атрибут не поддерживается в Internet Explorer.
formaction URL Задаёт адрес, куда будут пересылаться данные формы при нажатии на кнопку. (Используется только для кнопок с атрибутом type="submit").
formenctype application/x-www-form-
urlencoded
multipart/form-data
text/plain
Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только для кнопок с атрибутом type="submit"). все символы кодируются перед отправкой (значение по умолчанию). символы не кодируются пробелы заменяются знаком "+", но символы не кодируются.
formmethod Указывает метод HTTP запроса, который будет использован при отправке данных формы. (Используется только для кнопок с атрибутом type="submit")
get Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post Браузер устанавливает связь с сервером и посылает данные для обработки.
formnovalidate formnovalidate Отменяет проверку данных формы на корректность. (Используется только для кнопок с атрибутом type="submit").
formtarget Указывает, где показывать ответ после отправки формы. (Используется только для кнопок с атрибутом type="submit").
blank открывает ответ в новом окне.
self открывает ответ в текущем окне.
parent открывает ответ в родительском фрейме.
top открывает ответ во всю ширину окна.
name name Определяет имя кнопки.
type Определяет тип кнопки.
button обычная кнопка
reset кнопка, которая очищает форму от введенных данных
submit кнопка для отправки данных формы
value text Устанавливает значение кнопки.

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

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





Похожие статьи