Тег <button>
создает интерактивную кнопку в форме HTML form.
Кнопки, созданные с помощью элемента <button>
, аналогичны кнопкам, созданным с помощью элемента <input>
, но они предоставляют более широкие возможности для кастомизации.
Так, вы можете в качестве содержимого элемента <button>
вы можете поместить текст или изображение.
Тип: | Inline |
Контент: | Любой блочный, инлайновый элемент, текст |
Открывающий тег: | Обязательный |
Закрывающий тег: | Обязательный |
Версия: | HTML 4, 4.01, 5 |
- Если вы используете тег
<button>
в форме HTML, учитывайте, что браузеры могут отправлять значения по разному. Internet Explorer, до 9 версии, отправит текст, содержащийся между открывающим и закрывающим тегом элемента кнопки, в то время как другие браузеры будут отправлять содержимое атрибута value. - В IE7 при отправке формы с
<button type="submit" name="myButton" value="foo">Отправить</button>
отправленные данные методом POST приведут к отправкеmyButton=Отправить
вместо ожидаемогоmyButton=foo
Синтаксис
Базовый синтаксис тега <button>
выглядит следующим образом:
HTML / XHTML: <button type="button|reset|submit"> ... </button>
Примеры написания кода тега <button>
:
<form action="action.php" method="post">
<p>
Имя пользователя:<input type="text" name="firstname">
<button type="submit" value="Submit">Отправить</button>
<button type="reset" value="Reset">Сброс</button>
</p>
</form>
Специальные атрибуты тега
В следующей таблице приведены атрибуты, которые относятся к тегу <button>
tag.
Атрибут | Значение | Описание |
---|---|---|
autofocus |
autofocus |
Этот логический атрибут указывает, что кнопка должна автоматически получать фокус при загрузке документа. |
disabled |
disabled |
Этот логический атрибут отключает кнопку для взаимодействия с пользователем. |
form |
form-id | Определяет элемент <form> , с которым связан элемент кнопки (его form owner) |
formaction |
URL | Определяет URL-программы, которая обрабатывает информацию, представленную кнопкой (только для type="submit" ). |
formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны быть закодированы при отправке данных формы на сервер (только для method="post" ) |
formmethod |
get post |
Определяет метод HTTP, который браузер будет использовать для отправки формы (только для type="submit" ). |
formnovalidate |
formnovalidate |
Этот логический атрибут указывает, что данные формы не должны проверяться при отправке (только для type="submit" ). |
formtarget |
_blank _self _parent _top |
Указывает цель для отображения ответа, полученного после отправки формы. |
name |
unique-name | Представляет имя кнопки. |
type |
button submit reset |
Определяет тип кнопки. |
value |
text | Определяет начальное значение кнопки. |
Глобальные атрибуты
Как и все другие HTML-теги, тег <button>
поддерживает все глобальные атрибуты в HTML5.
Атрибуты для событий
Тег <button>
так же поддерживает атрибуты событий в HTML5.
Поддержка браузеров
Тег <button>
поддерживается во всех основных браузерах.
<button>
следует использовать с осторожностью). Для безопасности, чтобы создать кнопки отправки в HTML-формах рекомендуется использовать тег <input>
.