Тег HTML <button>

  • Предыдущая страница <br>
  • Следующая страница <canvas>

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

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

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

Совет:Всегда указывайте для <button> Элемент указывает атрибут type, чтобы сообщить браузеру,何类型的按钮.

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

Подробное описание

<button> Контрол с <input type="button"> предоставляет более мощные функции и более насыщенный контент.<button> Сравните с </button> Все содержимое между тегами является содержимым кнопки, включая любую接受的 текстовую информацию, например текст или мультимедийный контент. Например, мы можем включить изображение и связанный текст, чтобы создать привлекательный маркер изображения в кнопке.

Единственный запрещенный элемент - это картинка-маппинг, так как действия, чувствительные к мыши и клавиатуре, могут干扰 поведение кнопки формы.

Всегда указывайте для кнопки атрибут type.По умолчанию тип атрибута type в Internet Explorer: "button"а в других браузерах (включая规范 W3C) по умолчанию является "submit".

См. также:

Руководство по HTML DOM:Объект Button

Урок CSS:Настройка стиля кнопки

Пример

Так можно отметить кликабельную кнопку:

<button type="button">Нажми меня!</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
  • Имя рамки

Указывается, где должно отображаться ответ после отправки формы.

Используется только при type="submit".
name Имя Указывается имя кнопки.
popovertarget element_id Указывается элемент всплывающего окна, который нужно вызвать.
popovertargetaction
  • hide
  • show
  • toggle
 определяет действие, выполняемое при нажатии на кнопку, в отношении элементов окна.
type
  • button
  • reset
  • submit
 определяет тип кнопки.
value текст определяет начальное значение кнопки.

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

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

Событийные атрибуты

<button> Эти теги также поддерживают Событийные атрибуты в HTML.

Стандартные CSS настройки

Нет.

Более примеров

Пример 2

Использование 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>

попробуйте сами

Пример 2

Использование 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>

попробуйте сами

браузер поддерживает

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <br>
  • Следующая страница <canvas>