Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Создание кнопок
Элемент универсальный и в зависимости от значения атрибута type создаёт разные элементы формы: кнопки, переключатели, текстовые поля и др. Для кнопок зарезервировано три значения type , которые позволяют создать кнопки с разным функционалом:
Следует помнить, что все три варианта создают кнопки, по своему виду никак не различающиеся между собой. Разница лишь в их поведении.
Обычная кнопка
Такая кнопка применяется, как правило, в сочетании с JavaScript и при щелчке по кнопке выполняет заложенные в неё действия.
Здесь используются следующие атрибуты:
- type=»button» — создаёт кнопку;
- value — определяет надпись на кнопке;
- onclick — событие JavaScript, отвечающее за щелчок по кнопке.
В примере 1 при щелчке по кнопке вызывается пользовательская функция changeColor() , которая переключает цвет текста у класса .color с чёрного на красный и обратно.
Если забыть добавить не обязательный атрибут value , то кнопка получится «пустой» без всяких надписей на ней.
Кнопка для отправки формы на сервер
Такая кнопка позволяет пользователю отправить заполненную форму на сервер. Для этого сперва создаётся форма через элемент , внутри неё добавляется кнопка с атрибутом type и значением submit (пример 2).
При щелчке по кнопке произойдёт отправка текста, введённого в поле, на адрес handler.php. После чего серверная программа вернёт HTML-файл.
Если атрибут value у кнопки не указан, то браузер сам подставит текст, например, Chrome напишет «Отправить», а Firefox — «Отправить запрос».
Кнопка для очистки формы
Такая кнопка при щелчке по ней возвращает все поля формы в их исходное значение. Обычно применяется для быстрой очистки формы от введённых пользователем данных (пример 3). Попробуйте написать в поле произвольный текст и щёлкнуть по кнопке сброса. После этого введённый в поле текст будет удалён.
Для этой кнопки браузер так же подставляет текст самостоятельно, если атрибут value не указан. К примеру, Chrome напишет «Сбросить», а Firefox — «Сброс».
Использование
Размер кнопки подстраивается под её содержимое. Так, если внутрь вставить картинку большого размера, то и кнопка станет больше.
Кнопка для отправки формы на сервер
По умолчанию используется для отправки формы на сервер, поэтому атрибут type указывать не обязательно. Главное, поместить кнопку внутрь формы (пример 5). Если требуется обычная кнопка, то к добавляется атрибут type со значением button .
Здесь в форме встречается две кнопки — первая, без атрибута type , используется для отправки формы на сервер, а вторая, с type=»button» , обычная кнопка, которая проверяет, пустое текстовое поле или нет. Если поле пустое, к нему добавляется класс .wrong, меняющий цвет фона на коралловый.
Кнопка для очистки формы
Для создания кнопки сброса формы до исходных значений к элементу добавляется атрибут type со значением reset . Чтобы кнопка работала правильно, её следует поместить внутрь формы (пример 6).
Итоги
- Кнопка создаётся с помощью элемента или элемента .
- Внутрь можно вставить текст, изображение, а также другие элементы HTML.
- Атрибут type со значением submit создаёт кнопку для отправки формы на сервер.
- Атрибут type со значением reset создаёт кнопку для очистки формы.