HTML - тег <button> используется для создания кликабельных кнопок на веб-странице. Разница между этими элементами и кнопками, созданными с помощью тега <input>, заключается в том, что вы можете поместить контент (изображения или текст) внутри <button>.
Тег <button> - синтаксис и код
Тег <button> представлен парами. Содержимое записывается между открывающим (<button>) и закрывающим (</button>) тегами.
Пример кода кликабельной кнопки:
<button type="button">Нажми меня</button>
Определение и использование
- HTML - тег
<button> определяет кнопку, на которую можно нажать;
- Внутри элемента button вы можете поместить текст (и теги, такие как <i>, <b>, <strong>, <br>, <img> и т. д.). Это невозможно с кнопкой, созданной с помощью элемента input!
✪ Рекомендация: всегда указывайте атрибут type для элемента button, чтобы сообщить браузерам, какой это тип кнопки
★ Примечание: вы можете легко стилизовать кнопки с помощью 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" |
| popovertarget |
element_id |
Указывает, какой элемент всплывающего окна вызывать |
| popovertargetaction |
hide
show
toggle |
Определяет, что происходит с элементом popover при нажатии кнопки |
| name |
name |
Указывает имя для кнопки |
| type |
button
reset
submit |
Определяет тип кнопки |
| value |
text |
Указывает начальное значение для кнопки |
Глобальные атрибуты
Тег <button> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <button> также поддерживает атрибуты событий в HTML
Дополнительные примеры
Используйте CSS для стилизации кнопок (с эффектом hover):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 17px 33px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 6px 3px;
transition-duration: 0.5s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 1px solid #04AA6D;
}
.button1:hover {
background-color: #04AA6D;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 1px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Зеленый</button>
<button class="button button2">Синий</button>
</body>
</html>
ПРИМЕР
Настройки CSS по умолчанию
Отсутствуют.
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
