Элемент <button> - это настоящая находка для разработчиков, желающих создавать интуитивно понятные интерфейсы. Он выглядит аналогично стандартным кнопкам отправки или сброса форм (как у элементов <input type="submit">, <reset> и т.д.), но обладает одним решающим преимуществом: в отличие от «пустых» инпутов, здесь есть пространство между открывающим и закрывающими тегами. Это значит, что внутрь можно смело помещать текст, изображения или любые другие HTML-элементы, делая кнопку максимально выразительной.
Когда браузер рендерит этот элемент на странице, всё его содержимое превращается в единый активный кликабельный блок. По умолчанию он выглядит так же, как и кнопка из <input type="button">, однако благодаря возможности встраивать сложные структуры, вы получаете огромные возможности для стилизации через CSS. Это открывает двери к созданию уникального дизайна, который просто не достижим с обычными инпутами!
Примечание: чтобы изменить стандартное поведение курсора при наведении на кнопку, используйте соответствующее свойство CSS.
Атрибуты - autofocus:
- Этот атрибут говорит браузеру: «Дай фокус этой кнопке сразу после загрузки страницы». Для логического атрибута autofocus значения можно задавать разными способами.
Важно знать: этот функционал не работает в IE9 и более старых версиях браузера.
- disabled:
- Отключает возможность нажатия. Это очень полезный инструмент, когда кнопка должна «оживать» только после выполнения определенных условий (например, после выбора чекбокса). Активировать её обратно можно будет через JavaScript.
- form:
- Определяет связь кнопки с конкретной формой. В качестве значения указывается один или несколько ID форм, разделенных пробелами. Количество ID зависит от того, сколько форм «привязано» к этой кнопке.
Примечание: Internet Explorer не поддерживает этот атрибут.
- formaction:
- Указывает URL, куда будут отправлены данные при нажатии. Если у самой формы уже есть атрибут action, то formaction будет иметь приоритет и переопределит его значение. Обратите внимание: этот атрибут работает только для кнопок с type="submit".
Примечание: не поддерживается в IE9 и более ранних версиях.
- formenctype:
- Определяет способ кодирования данных перед отправкой на сервер. Применимо исключительно для кнопок type="submit". Возможные значения:
- application/x-www-form-urlencoded - все символы кодируются (стандарт по умолчанию).
- multipart/form-data - кодирование не применяется (идеально для загрузки файлов).
- text/plain - пробелы заменяются на «+», но остальные символы остаются без изменений.
Если у формы задан атрибут enctype, то formenctype возьмет верх и переопределит его. Примечание: не поддерживается в IE9 и более ранних версиях.
- formmethod:
- Задает HTTP-метод отправки данных. Используется только для кнопок type="submit". Варианты:
- get - параметры добавляются в конец URL (URL?имя=значение).
- post - данные передаются в теле HTTP-запроса.
Если у формы уже есть атрибут method, то formmethod переопределит его значение. Примечание: не поддерживается в IE9 и более ранних версиях.
- formnovalidate:
- Отключает проверку данных формы на корректность при отправке. Работает только с кнопками type="submit". Если у самой формы есть атрибут novalidate, то formnovalidate его переопределит.
Примечание: не поддерживается в IE9 и более ранних версиях, а также в Safari.
- formtarget:
- Определяет, где откроется ответ сервера после отправки формы. Применимо только для кнопок type="submit". Возможные значения:
- _blank - новый вкладка или окно.
- _self - текущая страница (по умолчанию).
- _parent - родительский фрейм/окно.
- _top - весь доступный экран окна.
- имя_фрейма - конкретный iframe с указанным именем.
Если у формы задан атрибут target, то formtarget возьмет приоритет. Примечание: не поддерживается в IE9 и более ранних версиях.
- name:
- Имя элемента button. Оно используется для идентификации данных формы после отправки или для обращения к элементу в JavaScript.
Интересный факт: несколько элементов button могут иметь одно и то же имя name. Это позволяет отправлять разные значения через одну форму, если нажата конкретная кнопка.
- type:
- Задает поведение кнопки:
- button - обычная активная кнопка (без отправки формы).
- reset - очищает введенные данные в форме.
- submit - отправляет данные формы (значение по умолчанию).
Совет: всегда явно указывайте атрибут type! Разные браузеры могут иметь разные значения по умолчанию, что может привести к неожиданным проблемам.
- value:
- Значение, которое будет отправлено на сервер или прочитано скриптами.
Важное предупреждение: если вы используете button в форме, знайте: IE7 и более старые версии при отправке будут передавать текст между тегами <button> и </button>. В то время как современные браузеры отдают значение атрибута value. Учитывайте эту разницу!
Кроме того, тег button поддерживает и другие стандартные глобальные HTML-атрибуты.