Тег <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>.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.