Формы предназначены для отправки информации CGI-приложению, то есть нашему сценарию. Рассмотрим простую форму ввода имени:
Имя:
Данная форма содержит всего два элемента — поле для ввода имени и кнопку с надписью «Передать». Что же происходит, когда пользователь вводит имя и нажимает на кнопку «Передать»? Браузер передаст сценарию 1.php параметр user_name. В качестве значения параметра будет введенное пользователем имя. Так как используется метод GET, то в строке адреса вы увидите:
http://localhost/1.php?user_name=Denis
Форма в HTML-документе реализуется тегом-контейнером FORM, в котором задаются все управляющие элементы — поля ввода, кнопки и т.д. Если управляющие элементы указаны вне содержимого тега FORM, то они не создают форму, а используются для построения пользовательского интерфейса на WEB-странице, то есть для привнесения в нее различных кнопок, флажков, полей ввода. Обработка таких элементов производится индивидуально в рамках самого HTML-документа с помощью включенных в него скриптов. А могут вообще никак не обрабатываться. Например, управляющий элемент (тег) TEXTAREA часто используется для создания окна с полосой прокрутки внутри документа для вывода большого текста, который играет второстепенную роль. Обычно так отображаются тексты лицензионных соглашений, тексты больших комментариев или правила пользования данным WEB-ресурсом.Имена элементам формы присваиваются через их атрибут NAME.Каждый элемент формы имеет начальное, используемое по умолчанию, и конечное значения, которые являются символьными строками. Начальные значения элементов не меняются, благодаря чему может осуществляться сброс значений, указанных пользователем. Результатом этого действия будет установка всех управляющих элементов формы в своих первоначальных используемых по умолчанию значениях.В HTML 4.01 определены следующие типы управляющих элементов:1. Кнопки — задаются с помощью элементов BUTTON и INPUT. Различают:- кнопки отправки — при нажатии на них осуществляют отправку формы серверу;- кнопки сброса — при их нажатии устанавливают управляющие элементы в первоначальные значения;- прочие кнопки — кнопки, для которых не указано действие, выполняемое по умолчанию при их нажатии.2. Зависимые переключатели (переключатели с зависимой фиксацией) — задаются элементом INPUT и представляют собой переключатели «вкл\выкл». Если несколько зависимых переключателей имеют одинаковые имена, то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение «вкл», то все остальные автоматически — в положение «выкл». Именно это и является преимуществом их использования.- Независимые переключатели (переключатели с независимой фиксацией) — задаются элементом INPUT и представляют собой переключатели «вкл\выкл», но в отличие от зависимых, независимые переключатели могут принимать и изменять свое значение независимо от остальных переключателей. Даже если последние имеют такое же имя.- Меню — реализуется с помощью элементов SELECT, OPTGROUP и OPTION. Меню предоставляют пользователю список возможных вариантов выбора.- Ввод текста — реализуется элементами INPUT, если вводится одна строка, и элементами TEXTAREA — если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.- Выбор файлов — позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT.- Скрытые управляющие элементы — создаются управляющим элементом INPUT.Как видите, очень много элементов задаются с помощью одного и того же тега INPUT. Этот тег действительно является универсальным.
Как уже говорилось, форма в HTML-документе реализуется тегом-контейнером FORM. Этот тег своими атрибутами указывает адрес сценария, которому будет послана форма, способ пересылки и характеристику данных, содержащихся в форме. Начальный и конечный теги FORM задают границы формы, поэтому их указание является обязательным. Атрибуты тега FORM рассмотрим подробнее:- action — единственный обязательный атрибут. В качестве его значения указывается URL-адрес запрашиваемой CGI-программы, которая будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись MAILTO:URL, благодаря которой форма будет послана по электронной почте. Если атрибут ACTION все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная WEB-страница.- method — определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD может принимать два значения: get или post.- enctype — необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибута ENCTYPE:
— APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию).- MULTIPART/FORM -DATA.
Тег INPUT и способы его использования
Элемент INPUT является наиболее употребительным тегом, т.к. с его помощью реализуются основные функции формы. Он позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и др.Обратите внимание на особенность INPUT — у него нет конечного тега. Атрибуты и особенности использования INPUT зависят от способа его использования. Эти способы мы сейчас и рассмотрим.
Однострочные поля ввода
Наиболее часто используются поля ввода — ведь даже кнопка является полем ввода. Мы уже знакомы с полем ввода текстовой информации, поэтому обзор полей ввода начнем именно с текстового поля. Формат тега INPUT для создания поля ввода текстовой строки: Данный тег создает поле ввода с максимально допустимой длиной текста maxlen и размером в size знакомест. Если задан атрибут value, то в поле будет изначально отображаться указанная строка. В квадратных скобках помечены необязательные атрибуты.
Возможно, вы создаете какой-нибудь серьезный проект, требующий авторизации, то есть проверки имени пользователя и пароля. Конечно, имя пользователя можно ввести с помощью обыкновенного текстового поля. А вот как быть с паролем? Ведь он не должен отображаться на экране? В этом случае вам поможет поле ввода пароля: Принцип работы данного тега точно такой же, как и текстового. Разница заключается в том, что вводимая информация в поле не отображается, а заменяется «звездочками».Следует иметь в виду, что не рекомендуется устанавливать значение value (значение по умолчанию) из соображений безопасности. Да, в окне браузера данное значение не отображается, но стоит просмотреть исходный HTML-код, пароль будет виден «невооруженным глазом».
Скрытое текстовое поле
Для передачи служебной информации (о которой пользователь даже не должен подозревать) используются скрытые поля. С помощью таких полей, например, могут передаваться параметры настройки. Такие поля передаются серверу, но на Web-странице не отображаются.
Очень часто пользователю, заполняющему форму у себя в браузере, необходимо дать возможность указать свои настройки с помощью выбора определенных значений. При этом приводятся сами эти значения, а рядом с ними помещается небольшое квадратное поле, в котором можно установить, либо убрать галочку. При этом значение, соответственно, будет либо выбрано, либо нет.
Реализовать это можно опять же с помощью тега INPUT. Для этого только необходимо в качестве значения атрибута type указать checkbox:
Если переключатель был включен на момент нажатия кнопки отправки данных, то сценарию будет передан параметр имя = значение. Если же флажок выключен, то сценарию вообще ничего не будет передано — как будто нашего переключателя вообще нет.Переключатель может быть по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked.
Переключатель checkbox называется независимым, так как его состояние не зависит от состояния других переключателей checkbox. Таким образом, в одной форме может быть одновременно выбрано несколько переключателей.
Однако в HTML предусмотрен и такой переключатель, который зависит от других. Его мы и рассмотрим в следующем пункте.
Зависимые переключатели
Зависимый переключатель, так же как и независимый переключатель, может быть либо включен, либо выключен. При этом переключатель radio является зависимым переключателем, поскольку на форме может быть только один включенный переключатель типа radio. Точнее, если в форме присутствует несколько одноименных зависимых переключателей, то включен из них может быть только один. При выборе одного переключателя все одноименные зависимые переключатели автоматически выключаются. В качестве имени переключателей воспринимается значение атрибута name. Может быть только один активный переключатель. Рассмотрим такой пример, приведенный ниже.Форма с зависимыми переключателями:
Мужчина Женщина
В окне браузера наша форма будет выглядеть следующим образом:
Первый переключатель (со значением Male) активен по умолчанию (мы установили атрибут checked). Как только пользователь нажмет кнопку Передать, сценарию pol.php будет передан параметр pol (атрибут name обоих переключателей) со значением Male. Если же пользователь выберет другой вариант (female), сценарию будет передано соответствующее значение параметра pol.
Кнопка отправки формы
Последними элементами управления типа INPUT являются кнопки. Кнопка отправки служит для отправки сценарию введенных в форму значений. Синтаксис тега INPUT при этом таков: Атрибут value определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если же атрибут name для кнопки будет указан, то дополнительно к данным формы будет отправлена пара имя=значение от самой кнопки. Я советую обязательно указывать этот атрибут — он нам очень пригодится при программировании на PHP.
Кнопка сброса
Кроме кнопки submit есть еще кнопка reset, которая сбрасывает форму — устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на вашей форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки облегчает очистку формы, если были введены неправильные параметры.
Кнопка отправки с индивидуальным рисунком
Вместо кнопки submit можно использовать рисунок для отправки данных. При щелчке на этом рисунке произойдет то же, что и при нажатии на кнопку submit. Однако, кроме этого, сценарию будут переданы координаты места произведения щелчка на рисунке. Координаты будут переданы в формате: имя.x=коор_X, имя.y=коор_Y.
Ввод многострочного текста. Тег TEXTAREA
Мы переходим к рассмотрению многострочного поля ввода. В HTML эта возможность реализуется с помощью тега TEXTAREA. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько. Формат тега TEXTAREA таков:
Текст по умолчанию
Несколько замечаний относительно использования атрибутов: необязательные параметры cols и rows желательно указывать. Первый из них задает количество символов в строке, а второй — количество строк в области. Атрибут wrap определяет, как будет выглядеть текст в поле ввода:- Virtual — справа от текстового поля выводится полоска прокрутки. Вводимый пользователем текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши Enter.- Physical — этот тип зависит от браузера и в разных браузерах может вести себя по-разному.- None — текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не умещается в одну строку, появляется горизонтальная полоска прокрутки.
Стоит заметить, что наиболее удобным является тип Virtual.
Списки выбора. Тег SELECT
Довольно часто нам нужно представить какие-нибудь данные в виде списка и предусмотреть возможность выбора в этом списке. В HTML это реализуется в виде списков выбора, создавать которые можно с помощью тега SELECT. Список выбора позволяет выбрать один вариант из множества. Можно было бы использовать зависимые переключатели radio, но это не очень рационально. Например, если нам нужно, чтобы пользователь выбрал месяц, то один список будет занимать намного меньше места в окне браузера, чем целых двенадцать переключателей radio. Вот пример списка выбора, реализованного с помощью тега SELECT:
ЯнварьФевральМартАпрельМайИюньИюльАвгустСентябрьОктябрьНоябрьДекабрь Как видно, варианты выбора задаются с помощью тегов option. При отправке формы сценарию будет отослано значение value выбранного элемента списка.
Атрибут name определяет имя параметра, который будет передан сценарию. Если атрибут size равен 1, то список будет выпадающим. В противном случае список будет занимать n строк и будет «оснащен» полосой прокрутки. Значение, выбранное в списке по умолчанию, можно указать с помощью атрибута selected для соответствующего тега option. В приведенном примере месяц по умолчанию — Май.
Атрибут value является необязательным. Если его не указать, то будет передана строка, заключенная в тег option. В нашем случае сценарию будет передан параметр month-Сентябрь (если value не указан).
Списки множественного выбора
С помощью тега SELECT можно создавать и списки множественного выбора. В таких списках можно выбрать не одно, а сразу несколько значений. Чтобы сделать список с множественным выбором, необходимо для тега SELECT указать атрибут multiple.Например:
ЯнварьФевральМартАпрельМайИюньИюльАвгустСентябрьОктябрьНоябрьДекабрь
Если пользователь выберет несколько вариантов, то сценарию будут переданы параметры в форме:имя=значение&имя=значение…&имя=значение
Загрузка файлов
Тег INPUT позволяет реализовывать еще одну возможность в формах. Он позволяет создавать поле выбора файла для отправки. При этом формат тега таков:
