САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Найти всё для обучения

HTML Тег <button>



Пример

Кликабельная кнопка помечается следующим образом:

<button type="button">Нажми на меня!</button>
Попробуйте сами »

Определение и использование

Тег <button> определяет кликабельную кнопку.

Внутри элемента <button> можно поместить текст (и такие теги, как <i>, <strong>, <br>, <img>, и т.д.). Невозможно с помощью кнопки, созданной с помощью элемента <input> !

Совет: Всегда указывайте атрибут type для элемента <button>, чтобы сообщить браузерам, что это за кнопка.

Совет: Вы можете легко стилизовать кнопки с помощью CSS! Посмотрите на приведенные ниже примеры или посетите CSS Кнопки.


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

Элементы
<button> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
autofocus autofocus Указывает, что кнопка должна автоматически получать Фокус при загрузке страницы
disabled disabled Указывает, что кнопка должна быть отключена
form form_id Указывает, к какой форме относится кнопка
formaction URL Указывает, куда отправлять данные формы при отправке формы. Только для type="submit"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Указывает, как данные формы должны быть закодированы перед отправкой на сервер. Только для type="submit"
formmethod get
post
Указывает, как отправить данные формы (какой метод HTTP использовать). Только для type="submit"
formnovalidate formnovalidate Указывает, что данные формы не должны проверяться при отправке. Только для type="submit"
formtarget _blank
_self
_parent
_top
framename
Указывает, где будет отображаться ответ после отправки формы. Только для type="submit"
name name Задает имя для кнопки
type button
reset
submit
Указывает тип кнопки
value text Задает начальное значение для кнопки

Глобальные атрибуты

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


События атрибутов

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



Еще примеры

Пример

Используйте CSS для стилизации кнопок:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Зеленый */
.button2 {background-color: #008CBA;} /* Синий */
</style>
</head>
<body>

<button class="button button1">Зеленый</button>
<button class="button button2">Синий</button>

</body>
</html>
Попробуйте сами »

Пример

Используйте CSS для стилизации кнопок (с эффектом наведения курсора мыши):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

</style>
</head>
<body>

<button class="button button1">Зеленый</button>
<button class="button button2">Синий</button>

</body>
</html>
Попробуйте сами »

Связные страницы

HTML DOM справочник: Объкт button

CSS Учебник: Стиль buttons


Настройки CSS по умолчанию

Нет.