Параметры кнопки в html. Когда целесообразнее использовать ссылки. Кнопка с использованием изображения
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить - это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами - с помощью тега и тега
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5 IE Cr Op Sa Fx
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Атрибуты перечислены в табл. 1, но в отличие от кнопки
атрибут value
определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег
добавляется внутрь
Пример 2. Рисунок на кнопке
HTML5 IE Cr Op Sa Fx
В данном примере показано создание обычной кнопки с текстом, при этом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега
Атрибут name для этого типа кнопки можно не писать. Если не указать значение value , то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Пример 4. Кнопка для очистки формы
HTML5 IE Cr Op Sa Fx
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Очистить».
Тег
В отличие от этого элемента,
Синтаксис
Закрывающий тег обязателен.
WAI ARIA
Значение role по умолчанию: button
Допустимые значения role:
- checkbox
- link
- menuitem
- menuitemcheckbox
- menuitemradio
- option
- radio
- switch
Атрибуты
- autofocus - Устанавливает, что кнопка получает фокус после загрузки страницы.
- disabled - Блокирует доступ и изменение элемента.
- form - Связывает между собой форму и кнопку.
- formaction - Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
- formenctype - Способ кодирования данных формы.
- formmethod - Указывает метод пересылки данных формы.
- formnovalidate - Отменяет проверку формы на корректность.
- formtarget - Открывает результат отправки формы в новом окне или фрейме.
- name - Определяет уникальное имя кнопки.
- type - Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
- value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
autofocus
Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.
Синтаксис
Значения
Значение по умолчанию
disabled
Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию это значение выключено.
form
Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента
Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.
Дескриптор
Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и текст.
Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:
Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.
Обратите внимание
Дескриптор должен обязательно использоваться в качестве содержимого тега