Тег HTML <button>
Тег HTML <button> создаёт кликабельные кнопки. Атрибут type, стили, состояние disabled, доступность и примеры использования.
Тег <button> создаёт кликабельную кнопку на веб-странице. В отличие от кнопки, построенной на теге <input>, внутрь <button> можно помещать насыщенное содержимое — текст, изображения или другие строчные элементы HTML — между открывающим и закрывающим тегами. Именно поэтому сегодня <button> является предпочтительным элементом для большинства кнопок: его легче стилизовать, и он позволяет сочетать иконку с подписью.
На этой странице рассматриваются синтаксис <button>, важнейший атрибут type (и ошибка, возникающая при его отсутствии внутри формы), стилизация, состояние disabled, доступность, а также сравнение <button> с <input>.
В прошлом некоторые разработчики использовали <input type="button"> вместо <button>, поскольку очень старые версии Internet Explorer отображали <button> непоследовательно. Эта проблема давно устранена — в современных браузерах <button> является рекомендуемым вариантом.
Синтаксис
Тег <button> является парным. Содержимое записывается между открывающим (<button>) и закрывающим (</button>) тегами.
Пример тега HTML <button>:
Пример тега HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>Атрибут type
Атрибут type определяет, что делает кнопка. Существует три значения:
submit— отправляет родительскую форму.reset— сбрасывает все элементы управления формой к исходным значениям.button— сам по себе ничего не делает; поведение задаётся через JavaScript.
Самая распространённая ошибка: внутри <form> у <button> без атрибута type по умолчанию устанавливается type="submit". Поэтому кнопка, задуманная как обычная кнопка действия, отправит форму (зачастую перезагрузив страницу) в момент нажатия. Всегда явно указывайте type="button" для кнопок, не предназначенных для отправки формы.
Пример с submit, reset и button:
Пример трёх типов кнопок
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit отправляет форму, Reset очищает текстовое поле, а Say hi только выполняет свой JavaScript, не затрагивая форму.
Использование CSS-стилей
К тегу <button> можно применять стили CSS, чтобы изменить внешний вид кнопки, её размер, цвет, шрифт текста и так далее.
Пример тега <button> с CSS-стилями:
Пример тега HTML <button> со свойствами цвета и шрифта CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Результат
Состояние disabled
Кнопка с атрибутом disabled не может быть нажата или сфокусирована, не вызывает обработчики событий и не отправляет форму. Браузеры также отображают её серым цветом, чтобы пользователи видели, что она неактивна. Это удобно, когда действие временно недоступно — например, до корректного заполнения формы.
Пример отключённой кнопки
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Атрибуты
У тега <button> нет обязательных атрибутов, однако мы рекомендуем всегда указывать type="button", когда тег используется как обычная (не отправляющая) кнопка, поскольку внутри формы неустановленный type по умолчанию принимает значение submit.
| Атрибуты | Значение | Описание |
|---|---|---|
autofocus | autofocus | Указывает, что кнопка должна получить фокус после загрузки страницы. |
disabled | disabled | Деактивирует кнопку. (Используется, когда кнопка должна стать активной после выполнения какого-либо действия.) |
form | form_id | Указывает одну или несколько форм, к которым относится кнопка. Если кнопка принадлежит нескольким формам, их идентификаторы (form_id) разделяются пробелами. |
formaction | URL | Задаёт адрес, по которому будут отправлены данные формы после нажатия на кнопку. (Используется только для кнопок с атрибутом type="submit"). |
formenctype | application/x-www-form-urlencoded | Определяет способ кодирования данных формы при её отправке. (Используется только для type="submit"). Все символы кодируются перед отправкой формы (значение по умолчанию). |
multipart/form-data | Кодирует данные как составной MIME. | |
text/plain | Пробелы заменяются знаком «+», но символы не кодируются. | |
formmethod | get | Определяет метод HTTP-запроса, который будет использоваться при отправке формы (только для type="submit"). Передаёт данные формы в адресной строке («name = value»), которые добавляются к URL страницы после знака вопроса и разделяются амперсандом (&). |
post | Браузер взаимодействует с сервером и отправляет данные для обработки. | |
formnovalidate | formnovalidate | Указывает, что данные формы не должны проверяться при отправке (только для type="submit"). |
formtarget | _blank | Указывает, где будет отображён ответ после отправки формы (только для type="submit"). Открывает ответ в новом окне. |
_self | Открывает ответ в текущем окне. | |
_parent | Открывает ответ в родительском фрейме. | |
_top | Открывает ответ в окне на всю ширину. | |
name | name | Задаёт имя кнопки. |
type | button | Задаёт обычную кнопку. |
reset | Кнопка, очищающая форму от введённых данных. | |
submit | Кнопка для отправки данных формы. | |
value | text | Задаёт значение кнопки. |
Тег <button> также поддерживает глобальные атрибуты и атрибуты событий.
Доступность: задание доступного имени кнопки
Каждая кнопка должна иметь доступное имя — текст, который озвучивает программа чтения с экрана. Для обычной текстовой кнопки именем служит текст между тегами. Проблема возникает с кнопками, содержащими только иконку, где видимый текст отсутствует.
Если внутри кнопки находится только изображение, задайте тегу <img> атрибут alt, описывающий действие, а не картинку. Тогда кнопка возьмёт этот текст в качестве своего имени:
<button type="button">
<img src="search.png" alt="Search">
</button>Здесь alt="Search" описывает, что делает кнопка, поэтому программа чтения с экрана объявляет «Search, button».
Если в кнопке нет ни текста, ни изображения с alt — например, иконка нарисована шрифтом иконок или встроенным SVG — добавьте aria-label, чтобы у кнопки было имя:
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>aria-label является доступным именем кнопки; aria-hidden="true" не позволяет декоративной иконке озвучиваться. Обратите внимание, что aria-label и внутренний <img alt> — это разные механизмы; используйте тот, который подходит для разметки, и никогда не оставляйте кнопку с иконкой без одного из них.
Как добавить ссылку к кнопке?
Чтобы создать кликабельную ссылку, выглядящую как кнопка, используйте элемент <a>, стилизованный с помощью CSS. Вкладывать <button> внутрь <a> недопустимо в HTML5. Вот правильный подход:
Как добавить ссылку к кнопке?
<a href="https://example.com" class="button-link">
Button Label
</a>В этом примере элемент <a> стилизован под кнопку. При нажатии на него пользователь будет перенаправлен по указанному URL.
<button> и <input type="button">
Кнопку можно создать с помощью <button> или тега <input> (type="button", type="submit" или type="reset"). Они ведут себя похожим образом, но различаются по тому, что могут содержать:
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Источник подписи | Содержимое между тегами | Атрибут value (только обычный текст) |
| Насыщенное содержимое | Да — текст, изображения, иконки, другие строчные элементы HTML | Нет — только текст |
| Стилизация | Проще (псевдоэлементы, вложенные элементы) | Более ограничена |
| Закрывающий тег | Обязателен (</button>) | Отсутствует — это пустой элемент |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Используйте <button>, когда нужна иконка, форматированный текст или более тонкий контроль над стилями; прибегайте к <input>, когда достаточно простой текстовой подписи.