Платформы корпоративных информационных систем



              

Формы HTML



Формы 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 показано использование всех элементов форм.









Содержание  Назад  Вперед