CGI-программирование с самого начала : веб-формы

Уважаемые подписчики!

Как я обещал вам в прошлом выпуске, сегодня мы рассмотрим веб-формы.

Что такое веб-формы и зачем они нужны

В прошлом выпуске мы начали разбираться с передачей CGI-скриптам пользовательских и других параметров. При этом мы начали рассматривать то, что происходит "на приемном конце", на стороне сервера. Т.е. прием и обработку CGI-скриптом переданных ему параметров.

Очень часто скрипт должен обрабатывать параметры, введенные (или указанные) непосредственно пользователем. Но для того, чтобы скрипт мог получить от пользователя какие-то параметры, пользователь должен иметь возможность их ввести (или указать), а его броузер должен их передать скрипту в "понятной" ему форме.

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

Разработчики языка HTML предусмотрительно реализовали в нем такой механизм. Он называется веб-формой.

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

Итак, веб-форма - это средство, позволяющее пользователю передавать серверным приложениям (в том числе и CGI-скриптам) необходимые им параметры (собственно говоря, область применения веб-форм несколько шире, но они изначально разрабатывались и чаще всего применяются именно для этого).

Веб-формы позволяют передавать указанные пользователем параметры как методом GET, так и методом POST.

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

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

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

Вообще, форма в большинстве обычных случаев имеет сходство с диалоговым окном в Windows - и то, и другое содержит различные элементы ввода (строки, текстовые поля, "переключатели", списки и т.п.), а также "специальные" кнопки типа "OK" и "Отмена" :-)

Контейнером каждой формы является парный тэг <FORM> ... </FORM>

Обычно в открывающем тэге FORM указываются следующие параметры:

• ACTION - URL скрипта, которому надо передавать содержимое формы (так называемый "form handler" - тот скрипт, который "поддерживает", обслуживает данную форму). Если не указан, то форма отправляется на текущий URL (с которого загружена страница с формой).

• METHOD - метод передачи параметров (метод вызова скрипта) - GET или POST. По умолчанию - GET.

На самом деле у тэга <FORM> больше возможных параметров (скажем, для доступа к свойствам формы из JavaScript форма должна иметь имя - параметр NAME), но в нашем случае, для использования формы как средства передачи данных на сервер, с головой хватит и двух-трех :-) ).

Например:

<FORM action="/cgi-bin/test.cgi" method="GET">
<!-- здесь находятся элементы ввода -->
</FORM>

Отметим, что внутри контейнера формы могут находиться не только тэги элементов ввода и другие специфические, но и любые другие - тэги <FORM> ... </FORM> просто указывают границы формы. Однако форма не может содержать другие, вложенные в нее формы.

Элементы ввода в форме

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

Строка для ввода текста - элемент TEXT

<INPUT TYPE="text" NAME="text1" VALUE="по умолчанию">

• NAME - имя параметра (то, которое будет передано скрипту)

• VALUE - значение по умолчанию (начальное, до ввода).

• SIZE - размер (длина) текстовой строки в символах

• MAXLENGTH - максимальная длина вводимого значения в символах

• READONLY - атрибут "только чтение".

• DISABLED - запрещен (неактивен)

Элемент ввода TEXT позволяет организовать строку для ввода. Если Вам нужно поле ввода высотой более чем в одну строку, то для этого необходимо использовать элемент ввода TEXTAREA (о нем мы поговорим ниже).

Следует отметить, что при передаче формы все "не-ASCII" символы кодируются броузером в последовательности %HH, где HH-шестнадцатеричный код символа, а пробелы заменяются на знак '+'.

Строка для ввода пароля - элемент PASSWORD

<INPUT TYPE="password" NAME="text1" VALUE="по умолчанию">

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

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

Выключатель - элемент CHECKBOX

<INPUT TYPE="checkbox" NAME="option" VALUE="yes">

Этот элемент организует "выключатель", который может быть "включен" или "выключен" пользователем.

Параметры NAME и VALUE задают имя и значение параметра. В случае, если выключатель "включен" ("флажок" стоит), параметр передается скрипту. В случае, если "выключен" - не передается. Параметр checked задает активность элемента по умолчанию

Переключатель - элемент RADIO

<INPUT TYPE="radio" NAME="option" VALUE="1">
<INPUT TYPE="radio" NAME="option" VALUE="2">
<INPUT TYPE="radio" NAME="option" VALUE="3">

Напоминает элемент CHECKBOX, но организует переключатель - группу зависимых выключателей, из которых активным может быть только один (вспомните окно "Завершение работы" в Windows 98 :-) ) Этот элемент предоставляет пользователю возможность выбрать один вариант из нескольких возможных.

Переключатель организуется с помощью нескольких элементов radio, у которых указано одинаковое имя параметра (NAME) и разные его значения (VALUE).

При отправке формы будет отправлено активное значение параметра.

Возможна организация нескольких переключателей с разными параметрами NAME - они будут себя вести независимо друг от друга.

Можно задать активный элемент переключателя с помощью параметра CHECKED:

<INPUT TYPE="radio" NAME="option" VALUE="1" CHECKED>

Список - элемент SELECT

<SELECT NAME="mark" SIZE=5>
<OPTION VALUE="5">Отлично</OPTION>
<OPTION VALUE="4">Хорошо</OPTION>
<OPTION VALUE="3">Удовлетворительно</OPTION>
<OPTION VALUE="2">Неудовлетворительно</OPTION>
<OPTION VALUE="1">Вон с Инета !!!</OPTION>
</SELECT>

Параметры тэга SELECT:

• NAME - имя параметра

• SIZE - размер отображаемого списка (кол-во строк). Если SIE опущен или равен 1, то получается раскрывающийся список.

• MULTIPLE - опция, разрешающая выбор не одного, а нескольких значений одновременно. В том случае, если пользователь выбрал несколько значений, то при отправке формы будет указано НЕСКОЛЬКО параметров с ОДИНАКОВЫМИ именами NAME и значениями, соответствующими выбранным пунктам.

Основным параметром тэга <OPTION> является VALUE - значение параметра, соответствующее этой строке списка. Отображаемая в списке строка находится между открывающим и закрывающим тэгами OPTION.

Многострочное окно ввода текста - элемент TEXTAREA

<TEXTAREA NAME="message" ROWS=10 COLS=40></TEXTAREA>

Задается в виде контейнера <TEXTAREA> ... </TEXTAREA>

параметр NAME, как обычно, определяет имя передаваемого скрипту параметра. Параметры ROWS и COLS задают размеры поля ввода текста в символах - соответственно, количество строк и колонок.

Значением по умолчанию является все то, что находится между открывающим и закрывающим тэгом TEXTAREA.

Скрытое поле формы - элемент HIDDEN

<INPUT TYPE="hidden" NAME="action" VALUE="change">

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

Это, например, удобно, если один скрипт обслуживает несколько форм - по значению этого параметра он может поределить, данные из какой формы были отправлены и, соответственно, что с ними делать. :-)

Параметр является "скрытым" в том смысле, что он не виден пользователю, и пользователь может даже не догадываться о его существовании. "Секретным" он не является, т.к. его имя и значение легко читаются в исходнике HTML-страницы. Поэтому такие данные, как пароли доступа, лучше в таких параметрах не передавать. :-)

Кнопка - элемент BUTTON

<INPUT TYPE="button" name=b1 value="Нажми меня!">

Задает "пользовательскую" кнопку. Вряд ли параметр этого элемента предстаавляет для формы "самостоятельную ценность", но кнопка может использоваться для запуска клиентских скриптов.

Старые версии HTML не включали в себя этот элемент - включали в себя только "специальные" кнопки - SUBMIT и RESET.

Кнопка отправки формы на сервер - элемент SUBMIT

<INPUT TYPE="submit" value="Отправить мой запрос">

Кнопка, при нажатии на которую содержимое формы отправляется серверному скрипту. Это завершающее действие пользователя с формой. Параметр VALUE задает надпись на кнопке. Если указан параметр NAME (необязательный для данного элемента), то параметр NAME=VALUE также будет передан на сервер. Это позволяет разработчику разместить несколько элементов SUBMIT в одной форме для разных действий - скрипт сможет их различать по этому параметру.

Кнопка очистки формы - элемент RESET

<INPUT TYPE="reset" value="Очистить поля формы">

Кнопка, при нажатии на которую поля формы очищаются (возвращаются к значениям по умолчанию). Как и в предыдущем случае, параметр VALUE задает надпись на кнопке.

Группа элементов - контейнер FIELDSET

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

Группируемые элементы ввода заключаются в контейнер FIELDSET:

<FIELDSET>
<LEGEND>Заголовок группы элементов</LEGEND>
<!-- здесь располагаются элементы ввода-->
</FIELDSET>

В контейнере <FIELDSET> должен быть вложенный контейнер <LEGEND>, описывающий название ("легенду") группы элементов. Броузер заключит группируемые элементы в рамочку с этой легендой.

Свойства TABINDEX и ACCESSKEY

Многим пользователям неудобно заполнять форму, щелкая мышью по каждому полю ввода. Им гораздо удобнее и привычнее переключаться между элементами ввода с помощью клавиши TAB, как это возможно в большинстве диалоговых окон Windows. Чтобы облегчить им "жизнь", Вы можете использовать в своих формах возможность задать последовательность "переключения" полей ввода в своих формах с помощью клавиши TAB. Делается это с помощью свойств TABINDEX элементов ввода.

Свойство TABINDEX элементов ввода представляют собой число от 0 до 32767. Порядок возрастания этих чисел задает последовательность переключения между элементами.

Помимо этого, для облегчения работы с формой практически для каждого элемента ввода можно назначить "клавишу быстрого доступа" с помощью атрибута ACCESSKEY. Значением этого свойства должен быть единственный символ. При одновременном нажатии клавиши Alt и клавиши с этим символом фокус ввода будет сразу переходить к соответствующему элементу ввода. Для того, чтобы назначить "быструю клавишу" группе элементов ввода (FIELDSET), это свойство нужно указать в тэге <LEGEND>. При нажатии Alt+клавиши фокус ввода будет переходить к первому элементу ввода в группе.

Заключение

В сегодняшнем выпуске мы рассмотрели веб-формы, их элементы ввода и управления. Надеюсь, что я Вас не сильно напугал таким объемом информации:-) А если серьезно - в этом выпуске я постарался дать информацию сжато, в виде своеобразного конспекта-справочника.

При подготовке этого выпуска рассылки был использован HTML 4.0 Reference. Это очень полезный и информативный справочник о языке HTML версии 4.0. Правда, на английском языке. Возможно, где-то есть и на русском...

Вот и все на сегодня. В следующий раз мы рассмотрим передачу параметров скриптам методом POST и другие интересные вещи :-)