HTML-тег <button>
Тег <button> используется для создания кликабельных кнопок на веб-странице. Отличие этих элементов от кнопок, созданных с помощью тега <input>, заключается в том, что внутрь <button> можно помещать содержимое (изображения или текст).
TIP
Используйте элемент <input> для определения кнопки внутри HTML-формы, так как браузеры по-разному отображают содержимое тега <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>Использование CSS-стилей
Вы можете применять CSS стили к тегу <button>, чтобы изменить внешний вид кнопки, её размер, цвет, шрифт текста и т. д.
Пример тега <button> с CSS-стилями:
Пример HTML-тега <button> со свойствами CSS color и font
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" style="color: red;"><b>HTML Book </b></button>
<hr />
Button with increased font size
<button type="button" style="font: bold 14px Arial;">Download the book </button><br />
</body>
</html>Результат
Атрибуты
TIP
У тега <button> нет обязательных атрибутов; однако мы рекомендуем всегда использовать атрибут type="button", если тег используется как обычная кнопка.
Примечание: Если атрибут type опущен и кнопка находится внутри HTML-формы, по умолчанию она получает 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 | Кодирует данные как multipart 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> также поддерживает Глобальные атрибуты и Атрибуты событий.
Как добавить атрибут alt к кнопке с изображением?
Чтобы добавить текст alt к кнопке с изображением, можно использовать атрибут alt. Вот пример:
Как добавить атрибут alt к кнопке с изображением?
<button type="button">
<img src="button-image.png" alt="Button Label">
</button>В этом примере атрибут alt добавлен к элементу img внутри элемента button. Значение атрибута alt должно представлять собой краткое описание изображения, которое будет прочитано программами чтения с экрана вместо самого изображения.
Как добавить ссылку в кнопку?
Чтобы создать кликабельную ссылку, выглядящую как кнопка, используйте элемент <a>, стилизованный с помощью CSS. Обёртывание <button> внутрь <a> некорректно в HTML5. Вот правильный подход:
Как добавить ссылку в кнопку?
<a href="https://example.com" class="button-link">
Button Label
</a>В этом примере элемент <a> стилизован так, чтобы напоминать кнопку. При нажатии на неё пользователь перейдёт по указанной ссылке.
Практика
Какие свойства и способы использования имеет HTML-тег <button>?