Тег | HTML справочник
HTML тегиЗначение и применение
HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).
Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
autofocus | autofocus | Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы. |
disabled | disabled | Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). |
form | form_id | Задает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе. |
formaction | URL | Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = «submit» >). |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = «submit» >). |
formmethod | get post | Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = «submit» >). |
formnovalidate | formnovalidate | Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = «submit» >). |
formtarget | _blank _self _parent _top framename | Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне. Используется только для <button type = «submit» >. |
name | name | Задает имя для кнопки, которое передается при отправке формы. |
type | button reset submit | Указывает тип кнопки. Значение по умолчанию submit. |
value | text | Определяет начальное значение для кнопки. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Тег <button></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;"> <b>Кнопка 1</b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px"> <img src = "../../images/top2.png" alt = "up" width = "40" height = "40"> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;"> <i>Кнопка 3</i> </button><br><br> </body> </html>
В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:
- Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
- Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
- Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).
Результат нашего примера:
Пример использования тега <button> (кнопкa в HTML).В следующем примере рассмотрено применение атрибутов, которые позволяют не производить проверку данных на корректность, введенных пользователем и задать браузеру, где показать ответ, полученный после отправки формы.
<!DOCTYPE html> <html> <head> <title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title> </head> <body> <form id = "myForm"> <input type = "text" name = "ulogin" placeholder = "Ваше имя"><br> <!-- определяем элемент управления для текстовой информации --> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос"></textarea><br> <button formtarget = _blank formnovalidate>Отправить</button> <!-- определяем кнопку для отправки формы --> </form> </body> </html>
В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtarget со значением «_blank» указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.
Результат нашего примера:
Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.Отличия HTML 4.01 от HTML 5
В HTML 5 добавлены 7 новых атрибутов.Значение CSS по умолчанию
Нет.Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».Атрибуты событий
Элемент поддерживает «атрибуты событий».HTML теги
| Справочник HTML
Элемент <button> (от англ. «button» ‒ «кнопка») cоздаёт в документе интерактивные кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).
Примечание: Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что разные браузеры могут представить различные значения.
Совет: Используйте тег <input> для создания кнопок внутри HTML форм.
Синтаксис
<button>...</button>
Закрывающий тег
Обязателен.
Атрибуты
- autofocusHTML5
- Устанавливает, что кнопка получает фокус после загрузки страницы.
- disabled
- Блокирует доступ и изменение элемента.
- formHTML5
- Связывает между собой форму и кнопку.
- formactionHTML5
- Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку (только для <button type = «submit»>).
- formenctypeHTML5
- Способ кодирования данных формы (только для <button type = «submit»>).
- formmethodHTML5
- Указывает метод пересылки данных формы (только для <button type = «submit»>).
- formnovalidateHTML5
- Отменяет проверку формы на корректность (только для <button type = «submit»>).
- formtargetHTML5
- Открывает результат отправки формы в новом окне или фрейме (только для <button type = «submit»>).
- name
- Определяет уникальное имя кнопки.
- type
- Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
- value
- Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Нет.
Различия между HTML 4.01 и HTML5
В HTML 5 добавлены 7 новых атрибутов.
Пример использования:
Элемент <button>
Пример HTML:
Попробуй сам<p><button>Кнопка с текстом</button></p>
<p><button><img src="images/Star.png" alt="Звезда"
style="vertical-align: middle"> Кнопка с рисунком</button></p>
Спецификации
Поддержка браузерами
Элемент | ||||||
<button> | 4+ | 1+ | 6+ | 1+ | 1+ | 1+ |
Элемент | ||||
<button> | 1+ | 1+ | 6+ | 1+ |
Кнопка
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Кнопку можно задать с помощью парного тега <button>…</button>. Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.
Атрибуты тега <button>
- autofocus
- Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
<button autofocus>...</button> <button autofocus="">...</button> <button autofocus="autofocus">...</button>
Атрибут не работает в Internet Explorer версии 9 и ниже.
- disabled
- Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий.
Значение можно задать тремя способами:
<button disabled>...</button> <button disabled="">...</button> <button disabled="disabled">...</button>
- form
- Идентификатор формы, к которой относится кнопка.
Атрибут не работает в Internet Explorer.
- formaction
- Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега <form> указан атрибут action,
то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.
Атрибут не работает в Internet Explorer версии 9 и ниже.
- formenctype
- Способ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:
- application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
- multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
- text/plain – пробелы преобразуются в символ «+», символы не кодируются.
Атрибут не работает в Internet Explorer версии 9 и ниже.
- formmethod
- Метод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:
- get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
- post – данные формы передаются отдельно, как HTTP.
Атрибут не работает в Internet Explorer версии 9 и ниже.
- formnovalidate
- Отмена проверки формы на корректность. Используется только для кнопок типа submit. Значение можно задать тремя способами:
<button formnovalidate>...</button> <button formnovalidate="">...</button> <button formnovalidate="formnovalidate">...</button>
Атрибут не работает в Internet Explorer версии 9 и ниже.
- formtarget
- Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit. Возможные значения:
- _blank – В новом окне или вкладке,
- _self – В текущем окне (по умолчанию),
- _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
- _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
- имя_фрейма – В iframe с указанным именем.
Атрибут не работает в Internet Explorer версии 9 и ниже.
- name
- Имя кнопки.
- type
- Тип кнопки. Возможные значения:
- button – Просто кнопка (по умолчанию),
- submit – Кнопка завершения работы и передачи данных,
- reset – Кнопка сброса.
- value
- Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Для тега <button> также доступны общие атрибуты и атрибуты обработки событий.
Пример кнопки с рисунком
<button>
Кто это?<br>
<img src="be.gif" alt="Людвиг ван Бетховен">
</button>
РЕЗУЛЬТАТ:
Кто это?Можно вместо рисунка вставить что угодно, хоть таблицу, если вам это необходимо.
Пример кнопки с таблицей
<button>
<br>
<table>
<tr>
<td>нажми на кнопку</td>
<td>получишь результат</td>
</tr>
</table>
<br>
</button>
РЕЗУЛЬТАТ:
нажми на кнопку | получишь результат |
Создание кнопок при помощи тега
Элемент ‘button’, формирующийся парным тегом <button> (от англ. button – кнопка), используется для создания кнопок, тип которых определяется атрибутом type. В качестве значений атрибут может принимать следующие три:
- «button» – создает обычную кнопку;
- «reset» – создает кнопку сброса формы в первоначальное состояние;
- «submit» – создает кнопку отправки данных формы на сервер.
По своему действию элемент ‘button’ очень похож на элемент ‘input’ с аналогичными значениями атрибута type, но при этом он не является пустым элементом и позволяет размещать внутри себя другие элементы, например, изображения, которые потом становятся одной активной кнопкой. А далее, используя стили CSS, можно изменять внешний вид кнопки по своему усмотрению.
Помимо атрибута type элемент ‘button’ имеет еще ряд уже известных нам атрибутов: autofocus, disabled, form, formnovalidate, formaction, formenctype, formmethod, formtarget, name, value. Их можно посмотреть в нашем справочнике здесь.
Опять же, не стоит забывать, что собственные атрибуты кнопок переопределяют значения соответствующих атрибутов, если они указаны в элементе ‘form’.
Использование элемента ‘button’ показано в примере №1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Элемент 'button'</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <!-- Связываем текст с текстовым полем --> <label for="comment"> Оставить сообщение: </label> <br><br> <textarea cols="40" rows="10" wrap="hard"> Запрещается употреблять нецензурные выражения. </textarea> <br><br> <!-- Создаем кнопку отправки комментария на сервер --> <button type="submit" name="submit_button" disabled> Отправить на форум </button> </form> </body> </html>
Пример №1. Использование элемента ‘button’
Обратите внимание, что кнопка отправки неактивирована. Обычно это делается для того, чтобы кнопка не использовалась до тех пор, пока в поле не будет введен текст. После ввода минимального количества символов, которое устанавливается скриптами, кнопка активируется (опять же скриптами) и становится доступной для использования.
HTML тег button
Тег <button> определяет кнопку формы.
Внутри элемента <button> можно помещать контент — текст или изображения. Это основное отличие кнопок созданных при помощи этого элемента и элемента <input>.
При определении элемента <button> следует всегда задавать атрибут type, так как разные браузеры по умолчанию определяют разные типы для элемента <button>.
При использовании элемента <button> в HTML форме разные браузеры могут передавать разные значения. Поэтому в HTML формах для создания кнопок лучше использовать элемент <input>.
Атрибуты тега <button>
Атрибут | Описание |
---|---|
autofocus | Автоматически передает фокус элементу |
disabled | Отключает кнопку |
form | Определяет к какой форме относится элемент |
formaction | Определяет, куда будут отправлены данные формы |
formenctype | Определяет способ кодировки отправляемых на сервер данных формы |
formmethod | Определяет метод отправки на сервер данных формы |
formnovalidate | Отключает встроенную проверку корректности введенных данных формы |
formtarget | Определяет, куда загружать ответ сервера после отправки данных формы |
name | Определяет имя элемента кнопки |
type | Определяет тип кнопки |
value | Определяет значение для кнопки |
Общие атрибуты
Тег <button> поддерживает общие атрибуты и атрибуты-события.
HTML пример
HTML кнопка:
<button type="button">Нажми меня!</button>