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