Формы в HTML

С помощью форм в HTML осуществляется обмен данными между пользователем и сервером. Область применения форм не ограничивается одной лишь отправкой данных на сервер, имея доступ к любым элементам формы, их можно изменять и использовать по своему усмотрению.

Форма представляет собой набор полей для ввода данных, каждое из которых обладает своим уникальным именем. По своей сути форма - это обычный объект HTML. Но чтобы получить из нее данные необходим обработчик. Таким образом, можно сказать, что форма состоит из 2 частей:

1. Внешней части, видимой пользователю на странице, в которую он будет вводить данные.
2. Обработчика, принимаемого на себя данные из полей формы и совершающего над ними определенные действия.

Обработчик пишут на конкретном языке программирования, например язык PHP, поскольку язык HTML не подходит в связи с тем, что является языком разметки.

Создание формы

Для создания формы используется тег FORM, который указывает браузеру, где начинается и заканчивается форма. Между открывающим и закрывающим тегами и можно поместить любые нужные теги HTML. Этим добавляются элементы форм в ячейки таблиц при их форматировании, используются изображения. В документе можно использовать любое количество форм, однако одновременно на сервер можно отправить только одну форму. Поэтому не используют вложенные друг в друга формы.

Атрибуты тега FORM:

• action – используется для определения обработчика, к которому обращаются формы при их отправке на сервер (CGI-программа, HTML-документ, адрес электронной почты с ключевым словом maiito);
• enctype – используется для определения типа данных, которые отправляются вместе с формой;

• method – используется для сообщения серверу цели запроса, в нем применяются 2 основных метода:

  • get – самый распространенный метод используется для получения требуемой информации и передачи данных в адресной строке;
  • post – используется для отправки на сервер большего количества данных, чем в предыдущем методе, в запросе браузера;

• target – используется для определения окна, в которое будет загружаться итоговая страница после обработки формы браузером и возврате ее в виде HTML-документа. Окно имеет имя, задаваемое параметром NAME, который имеет следующие атрибуты:

  • blank - загружает в новом окне браузера;
  • self - загружает в текущее окно;
  • parent - загружает во фрейм-родитель, если его нет, то работает как self;
  • top - отменяет все имеющиеся фреймы и загружает в полном окне браузера, иначе работает как self.

Элементы форм

Форма лишь размещает в себе объекты, дублирующие элементы интерфейса операционной системы: кнопки, поля со списками, переключатели, флажки и пр.

Текстовое поле

В текстовое поле вводятся символы с клавиатуры. Различают следующие элементы формы, использующиеся для этого: однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле. Рассмотрим их подробнее.

Однострочное текстовое поле используется для ввода пользователем строки текста. Для удобного дизайна (чтобы элемент вмещался в отведенное ему место) можно ввести ограничение поля по ширине. Текст в данном случае пишется как обычно, при этом введенные ранее символы скрываются. Данное поле имеет следующие параметры:

• maxlength – определяет максимальное количество вводимых символов при наборе текста, если параметр не указан, то число вводимых символов не ограничивается;
• name – определяет имя поля для идентификации его обработчиком формы;
• size – определяет ширину поля, зависящую от настроек операционной системы и выбранного браузера;
• value – представляет начальный текст, который содержится в поле.

Поле для ввода пароля представлено обычным текстовым полем с отображением вводимого текста в виде звездочек, что является мерой защиты при вводе пароля. Параметры этого поля аналогичны параметрам текстового поля. Этот тип поля широко используется на различных сайтах для авторизации пользователя и разграничения доступа к разделам сайта (подтверждение права доступа).

Многострочное текстовое поле используется при создания области ввода нескольких строк текста. В нем применяется тег TEXTAREA, который в отличие от тега INPUT позволяет делать переносы строк, сохраняемые при отправке данных на сервер. Параметры данного типа поля:

• cols – задает ширину текстового поля, определяемую числом символов моноширинного шрифта;
• disablet - блокирует доступ к текстовому полю и его изменению (поле не активно серого цвета);
• name – служит для определения уникального имени элемента TEXTAREA, которое используется при отправке данных на сервер или для доступа к полю через скрипты;
• readonly – делает поле недоступным для пользователя;
• rows – задает высоту текстового поля, определяемую количеством отображаемых строк без прокрутки содержимого, которая меняется при изменении размера шрифта с помощью стилей;
• wrap – определяет для браузера правила переноса текста в поле TEXTAREA и внешний вид отправляемых данных на сервер. При отсутствии этого параметра текст в поле набирается одной строкой.

Между тегами и может вставляться любой текст, отображаемый внутри поля.

Изображения в текстовом поле

Они используются для привлечения внимания пользователей и дизайнерского оформления. Рисунок можно вставлять прямо в поле для ввода текста.

Сначала изображение подготавливается, а затем добавляется к тегу INPUT в виде фона при помощи атрибута background. Используя свойство height можно уменьшить исходное изображение или увеличить высоту поля, подгоняя его под высоту изображения. При использовании аргумента no-repeat рисунок отобразится только 1 раз и не станет повторяться. Атрибут padding-left обеспечивает набор текста справа от рисунка, его значение зависит от ширины изображения.

Кнопки

Представляют собой самый понятный и широко используемый элемент интерфейса. Кнопка позволяет выполнить одно единственное действие - нажатие. За счет этого кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на Web-странице можно создать с помощью тегов: INPUT и BUTTON. Рассмотрим добавление кнопки через INPUT.

Создать кнопку можно, используя тег BUTTON. Он по своему действию схож с результатом, получаемым с помощью тега INPUT. Однако тега BUTTON позволяет использовать расширенные возможности по созданию кнопок (разместить на кнопке изображение или таблицу, использовать стили оформления).

Переключатели

Переключатели (radiobutton) предназначены для выбора одного единственного варианта из нескольких предложенных. Создаются они следующим образом:

Это поле имеет 3 основных параметра:

• name – определяет имя поля, так как переключатели являются групповыми элементами, то имя у всех элементов группы будет одинаковым;
• value – определяет значение, которое будет отправлено на сервер, каждый элемент имеет свое уникальное значение;
• checked - используется для предварительного выделения пункта списка, набор переключателей может иметь только один выделенный пункт.

Флажки

Флажки (checkbox) используются при необходимости выбора двух или более вариантов из предложенного списка.

Параметры флажков аналогичны переключателям, а именно: name задает имя поля, value - его значение, achecked устанавливает флажок как помеченный. При этом каждый флажок в группе рассматривают как независимый, в связи с этим имена и значения у них должны различаться.

Поле со списком

Представляет собой раскрывающееся меню и является одним из гибких и удобных элементов формы. В зависимости от настроек в нем можно выбрать одно или несколько значений. Преимуществом списка является его компактность: может занимать всего одну строку, а для просмотра всего списка необходимо на него нажать. Однако это является и недостатком, так как пользователь сразу не видит весь выбор. Рассмотрим как создается поле со списком.

С помощью тега SELECT создается элемент интерфейса, имеющий вид раскрывающегося списка, а также список с одним или множественным выбором. Окончательный вид зависит от использования параметра size тега SELECT, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, который указывается в теге OPTION и может изменяться с помощью стилей. Каждый пункт создается в теге OPTION, который заключается в контейнер SELECT. Если планируется отправлять данные списка на сервер, то следует поместить элемент SELECT внутрь формы.