Формы HTML
Прежде чем изучать особенности CGI, полезно рассмотреть наиболее часто встречающийся способ, с помощью которого конечные пользователи получают интерфейс к CGI-программам: формы HTML. Формы являются частью языка HTML, предоставляющей конечному пользователю поля различных типов. Данные, вводимые в поля, могут быть пересланы веб-серверу. Поля могут служить для ввода текста или являться кнопками, которые пользователь может нажать или отметить галочкой. Вот пример страницы HTML, содержащей форму:
<НТМL><НЕАD><ТITLЕ>Моя страница с формами</title></head>
<BODY>
<р>Это страница с формой.
<p><FORM ACTION="mycgi.cgi" METHOD=POST>
Введите свое имя: <INPUT NAME="firstname" SIZE=40><br>
<INPUT TYPE=SUBMIT VALUE="Отправить форму">
</form>
</body></html>
Данная форма создает строку длиной 40 символов, куда пользователь может ввести свое имя. Под строкой для ввода располагается кнопка, при нажатии которой данные формы передаются серверу. Ниже перечислены относящиеся к формам теги, поддерживаемые HTML 3.2 -наиболее распространенным в настоящее время стандартом. Названия тегов и атрибутов могут вводиться в любом регистре, но мы придерживаемся необязательного соглашения, согласно которому открывающие теги пишутся в верхнем регистре, а закрывающие - в нижнем.
<FORM>
Этот тег указывает на начало формы. В конце формы требуется закрывающий тег </Form> . Между тегами <FORM> допускаются три атрибута: ACTION задает URL или относительный путь к CGI-програм-ме, которой будут посланы данные; METHOD указывает метод HTTP, посредством которого будет послана форма (это может быть GET или ч POST, но мы почти всегда будем использовать POST); ENCTYPE задает метод кодирования данных (его следует использовать только при четком понимании того, что вы делаете).
<INPUT>
Предоставляет наиболее гибкий способ ввода данных пользователем. Фактически есть девять разных типов тега <INPUT> . Тип задается атрибутом TYPE. В предыдущем примере используются два тега <INPUT>: один с типом SUBMIT и другой с типом по умолчанию TEXT. Девять типов следующие:
TEXT
Поле для ввода пользователем одной строки текста.
PASSWORD
To же, что TEXT, но вводимый текст не отображается на экране.
CHECKBOX
Флажок, который пользователь может устанавливать и сбрасывать.
RADIO
Радиокнопка, которая должна объединяться еще хотя бы с одной радиокнопкой. Пользователь может выбрать только одну из них.
SUBMIT
Кнопка, при нажатии которой форма отправляется на веб-сервер.
RESET
Кнопка, при нажатии которой в форме восстанавливаются значения по умолчанию.
FILE
Аналогичен текстовому окну, но предполагает ввод имени файла, который будет отправлен на сервер.
HIDDEN
Невидимое поле, в котором могут храниться данные.
IMAGE
Аналогичен кнопке SUBMIT, но можно задать картинку для изображения на кнопке.
Кроме атрибута TYPE теги <INPUT> обычно имеют атрибут NAME, связывающий введенные в поле данные с некоторым именем. Имя и данные передаются серверу в стиле величина=значение . В предыдущем примере текстовое поле именовалось firstname . Можно использовать атрибут VALUE, чтобы присвоить полям типа TEXT, PASSWORD , FILE и HIDDEN предустановленные значения. Этот же атрибут, используемый с кнопками типа SUBMIT или RESET, выводит на них заданный текст. Поля типа RADIO и CHECKBOX можно отобразить как выставленные с помощью атрибута CHECKED без задания значения.
Атрибут SIZE используется для задания длины полей типа TEXT, PASSWORD и FILE. Атрибут MAXLENGTH можно использовать для ограничения длины вводимого текста. Атрибут SRC задает URL изображения, используемого в типе IMAGE. И наконец, атрибут ALIGN задает характер выравнивания изображения для типа IMAGE и может иметь значение TOP, MIDDLE, BOTTOM (по умолчанию), LEFT или RIGHT (вверх, в середину, вниз, влево, вправо).
<SELECT>
Этот тег обеспечивает создание меню, из пунктов которого пользователь делает выбор. Меню может быть выпадающим, в котором пользователь выбирает только один пункт, или иметь вид списка, из которого выбирается один или несколько пунктов. Каждый пункт меню задается тегом <OPTION> . Необходимо использовать закрывающий тег </select> .
Как и у тега <INPUT> , у тега <SELECT> есть атрибут NAME, указывающий на имя введенных данных. Возможно использование атрибута SIZE для определения того, сколько пунктов меню будет одновременно выводиться на экран. При отсутствии атрибута SIZE список выводится в виде выпадающего меню. Присутствие атрибута MULTIPLE указывает на возможность выбора нескольких пунктов одновременно. Тег <OPTION> имеет два атрибута. Атрибут VALUE устанавливает возвращаемое значение. Если VALUE не указан, то возвращается текст от тега <OPTION> и до конца строки. Наличие атрибута SELECTED в теге <OPTION> означает, что этот пункт выбирается по умолчанию.
<TEXTAREA>
Этот последний тег, относящийся к формам, позволяет пользователям вводить куски текста, которые будут переданы на веб-сервер. Тег <TEXTAREA> выводит окно, в которое пользователь может ввести любое число строк текста. Необходимо использовать закрывающий тег </Textarea> , и в качестве текста по умолчанию будет принят любой текст, находящийся между тегами <TEXTAREA> и </Textarea> , аналогично атрибуту VALUE для тега <INPUT> . Для тега <TEXTAREA> необходимо задать три атрибута. Атрибут МАМЕ определяет имя данных -так же, как и для других тегов форм. Атрибуты ROWS и COLS задают число строк и колонок при выводе поля на экран, но не ограничивают размер данных, вводимых пользователем.
В Примере 9-1 показано использование всех элементов форм.
Пример 9-1. Форма HTML, демонстрирующая использование различных элементов
<HTML><HEAD><TITLE>Moя вторая страница форм</TITLE>
<р>Это анкета. Пожалуйста, сообщите о себе следующие данные:
<!-Начнем форму. Мы используем метод 'POST' для передачи данных
CGI-программе с именем 'survey.cgi'
<FORM METHOD=POST ACTION="survey.cgi">
<р>Имя: <INPUT SIZE=40 NAME='name'Xbr>
<!-Это тег <INPUT>, имеющий (по умолчанию) тип 'TEXT'. Он имеет длину 40
символов, и данные получат имя 'name'
Номер социального страхования:
<INPUT TYPE=PASSWORD NAME='ssn' SIZE=20Xbr>
<!-Это тег <INPUT>, имеющий стиль 'PASSWORD', используемый для того, чтобы нельзя было подглядеть из-за спины пользователя, какое значение он ввел. Данные получат имя 'ssn', экранное поле имеет длину 20 символов.-->
Связаны ли вы сейчас с коммунистической партией или были связаны с ней ранее?
<INPUT TYPE=CHECKBOX NAME='commie' VALUE='yes'><br>
<!-Это тег <INPUT>, имеющий тип 'CHECKBOX' и использующий для данных имя 'commie'. При передаче формы с установленным флажком с именем 'commie'будет ассоциировано значение 'yes'
Пол:
<INPUT TYPE=RADIO NAME='sex' VALUE='мужской'> Мужской
<INPUT TYPE=RADIO NAME='sex' VALUE='женский'> Женский
<INPUT TYPE=RADIO NAME='sex' VALUE='отсутствует1 CHECKED> Отсутствует<br>
<!-Три тега <INPUT> типа 'RADIO', использующие для данных имя 'sex'. Можно выбрать только один вариант из трех, и поскольку один из них предустановлен, значение будет послано, даже если пользователь не выберет ни одного из них, Посылаемое серверу значение находится в атрибуте 'VALUE' и мйжет не иметь отношения к тексту, следующему за тегом. -->
<INPUT TYPE=HIDDEN NAME="form_number" VALUE="33a">
<!-Это дополнительные данные, которые мы хотим послать серверу, но пользователю знать об этом не нужно, поэтому мы поместили их внутрь тега <INPUT> типа 'HIDDEN' -->
Пожалуйста, укажите путь к вашей любимой игре:
<INPUT TYPE=FILE NAME='game'
SIZE=40><br>
<!-Если пользователь введет правильный путь, то при подаче формы файл будет передан на веб-сервер Q именем 'game'. Это, однако, не столь опасно, как может показаться, поскольку большинство броузеров запрашивает подтверждение на передачу. -->
Ваш любимый цвет (цвета)?<br>
<SELECT NAME="color" MULTIPLE SIZE=5>
<OPTION>Красный
<OPTION>Зеленый
<OPTION>Желтый
<OPTION>Оранжевый
<OPTION VALUE="Голубой">Прелестный цвет лазурного неба
</select><br>
<!-Это пара тегов <SELECT></select>c несколькими возможностями выбора
<OPTION>. Данные получат имя 'color', можно выбрать сразу несколько пунктов, при этом на экран будут выведены все 5 одновременно. Последний пункт использует атрибут 'VALUE', чтобы передать краткий текст. -->
Опишите исчерпывающим образом общественно-политический фон романа
<I>Война и мир</I>
не более, чем в 50 словах.<br>
<TEXTAREA NAME='essay' COLS=70 ROWS=10></textarea><br>
<!-Это пара тегов <TEXTAREAx/textarea>, дающая место для ввода очерка. Данные получают имя 'essay'. Блок текста 70 символов в ширину и 10 строк в глубину. Пространство между тегами
<TEXTAREA> и </textarea>
можно использовать для образца очерка. -->
<INPUT TYPE=SUBMIT VALUE="Ввести данные">
<INPUT TYPE=RESET><!-Два тега <INPUT>типов 'SUBMIT' и 'RESET' соответственно. Кнопка 'SUBMIT' имеет переопределенную надпись 'Ввести данные ', а кнопка 'RESET' имеет надпись по умолчанию (определяемую броузером). Кликнув по кнопке 'SUBMIT', вы пошлете данные на веб-сервер, Кнопка 'RESET' восстановит данные R исходное состояние, удалив все введенные пользователем данные. -->
</form></body></html>
Единственный тип ввода, который мы здесь не использовали, - это тип IMAGE для тега <INPUT> . Можно было бы использовать его в качестве альтернативного способа отправки формы. Однако тип IMAGE редко совместим с текстовыми и не очень чуткими броузерами, поэтому благоразумно избегать его, если только ваш сайт не выполнен в насыщенном графическом стиле.
После знакомства с основами форм HTML можно приступить к изучению собственно CGI.
