Главная страница | Контакты | Случайная страница Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Создание формы на Web-странице

2.1 Параметры тэга <FORM>

Для создания формы на Web-странице в HTML-документе используется тэг-контейнер <FORM>... </FORM>. Его содержимым являются тэги <INPUT>, <TEXTAREA> и <SELECT>, которые предназначены для создания различных органов управления формы (полей ввода данных, кнопок, переключателей и др.).

Тэг <FORM>содержит следующие параметры:

ACTION - указывает URL-адрес программы (CGI-приложения), которая выполняет обработку данных формы;

METHOD - указывает один из двух основных способов передачи данных от формы на сервер:

GET - CGI-приложение получает данные из формы на Web-странице через переменную среды с именем QUERY_STRING;

POST - CGI-приложение получает данные из формы на Web-странице через стандартный поток ввода.

ENCTYPE - указывает MIME-тип передаваемых данных.

2.2 Параметры тэга <INPUT>

Тэг <INPUT> содержит такие параметры:

TYPE - указывает тип органа управления, его значениями являются:

text - однострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяются значениями параметров SIZE и MAXLENGTH тэга <INPUT>

textarea - многострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяются значениями параметров SIZE и MAXLENGTH тэга <INPUT> (для ввода многострочных данных предподчтительнее использовать тэг <TEXTAREA>);

password - поле для ввода пароля, аналогично параметру text, но текст, введенный пользователем не отображается на экране;

checkbox - независимый переключатель;

radio - переключатель, зависящий от состояния других переключателей этого типа, используется для выбора одного значения из нескольких;

file - для выбора и передачи файла;

button - кнопка с заданной подписью;

reset - кнопка, предначначенная для установки значений всех органов управления формы в исходное состояниие;

submit - кнопка, предначначенная для посылки данных из заполненной формы Web-серверу;

image - имеет такое же начначение, что и параметр submit, но реализован в виде изображения;

hidden - скрытое поле, не отображается на экране, но его значение может быть передано серверу.

NAME - указывает имя органа управления, посылается программе обработки формы;

VALUE - указывает значение или состояние органа управления;

CHECKED - используется для установки начального состояния переключателей;

SIZE - указывает ширину поля ввода текстовой информации (число символов), по умолчанию принимается равным 20;

MAXLENGTH - указывает максимальное количество символов, которое может быть введено в данном поле, по умолчанию не имеет ограничений;

ALIGN - указывает выравнивание текста возле формы;

SRC - URL-адрес графического изображения, если оно используется в органе управления.

В примере № 1 показано задание полей формы на Web-странице с помощью тэга <INPUT>.

2.3 Параметры тэга <TEXTAREA>

Для ввода многострочного текста лучше воспользоваться тэгом-контейнером <TEXTAREA>... </TEXTAREA>, для которого можно задать следующие четыре параметра:

NAME - указывает имя многострочного поля, посылается программе обработки формы;

ROWS - указывает размер поля по вертикали (в строках);

COLS - указывает размер поля по горизонтали (в символах);

WRAP - указывает тип переноса слов: при WRAP=off перенос слов запрещен, если этот параметр не указан, перенос слов выполняется по умолчанию.

В примере № 1 показано задание полей формы на Web-странице с помощью тэга <TEXTAREA>.

2.4 Параметры тэга <SELECT>

С помощью тэга-контейнера <SELECT>... </SELECT> можно указать в форме на Web-странице заранее проинициализированный список произвольных текстовых строк. Выбранная строка или выбранные строки передаются Web-серверу наряду с содержимым других полей формы. Для тэга <SELECT> определены следующие параметры:

NAME - указывает имя списка, которое вместе с выбранной строкой или строками передается серверу;

SIZE - указывает число строк списка, отображаемых на экране, остальные свернуты и для появления на экране требуют прокрутки списка;

MULTIPLE - указывает на то, что могут быть отмечены и переданы на сервер сразу несколько строк (их отметка осуществляется удержанием клавиши CTRL).

Каждая строка списка внутри контейнера <SELECT>... </SELECT> задается с помощью тэга <OPTION>, который содержит следующие параметры:

SELECTED - отмечает первоначально выбранные строки;

VALUE - задает значение выбранной строки.

Ниже приводится пример использования тэга <SELECT>, в котором задается набор из трех строк. На экране отображаются две строки: "Example1_2" и "Example1_3", первая из них отмечена как выбраная. Для доступа к третьей строке ("Example1_1") необходимо выполнить прокрутку. В данном примере отметить можно только одну строку из заданного набора (поскольку не задан параметр MULTIPLE).

Каждая отмеченная строка передается на сервер в виде пары "имя=значение". В качестве имени берется имя набора, т.е. "number". В качестве значения берется значение параметра VALUE, а если он не задан - текст после тэга <OPTION>. Например, для второй строки на Web-сервер передается пара "number=second", а для третьей строки, если она будет выбрана, - "number=Example1_3".

<SELECT NAME="number" SIZE=2>

<OPTION VALUE="first"> Example_1

<OPTION SELECTED VALUE="second"> Example1_2

<OPTION> Example1_3

</SELECT>

В примере № 1 приведен HTML-документ, реализующий на экране разные виды органов управления формы.

Щелкнув по кнопке "Пример №1", можно увидеть на экране форму с полями ввода однострочной и многострочной текстовой информации, с полем ввода пароля, с зависимыми и независимыми переключателями, с полем выбора одного или нескольких элементов списка, с кнопками "СБРОС" и "ПЕРЕДАЧА".

В качестве значения параметра ACTION указан URL-адрес "http://172.17.72.25/cgi-bin/form_cgi.exe". Это адрес программы "form_cgi.exe", которая находится на сервере с IP-адресом 172.17.72.25, является CGI-приложением и предназначена для обработки полей формы. Если эта программа не разработана и не помещена на сервер, а также в случае, когда сервер недоступен или не настроен, для проверки работы кнопки "ПЕРЕДАЧА" в качестве значения параметра ACTION можно указать адрес одного из файлов с HTML-документом, например, prim2-1.htm:

<FORM METHOD=get ACTION= "prim2-1.htm">

Пример 1

<HTML>

<HEAD>

<TITLE>Формы на Web-странице </TITLE>

<LINK REL=stylesheet HREF="my_d.css">

<STYLE>

.form{background:#a0ffff;color:#004000;font-size:6mm}

.kn{background:#e0e0ff; border:outset 4 blue; font-size:4.5mm}

</STYLE>

</HEAD>

<BODY>

<FORM METHOD=get ACTION="http://172.17.72.25/ cgi-bin/form_cgi.exe">

<TABLE ALIGN=center STYLE="color:#000080; font-size:6mm">

<TR> <TD VALIGN=top> Поле ввода однострочной текстовой информации <BR> (text);

<TD><INPUT TYPE=text NAME="txt1" VALUE= "Строка текста" SIZE=15 CLASS="form">

<TR><TD VALIGN=top> Поле ввода пароля <BR> (password)

<TD><INPUT TYPE=password NAME="pass" VALUE="www" SIZE=15 MAXLENGTH=3 CLASS= "form">

<TR><TD VALIGN=top> Поле ввода многострочной текстовой информации <BR> (textarea)

<TD><TEXTAREA NAME="txt2" ROWS=3 CLASS= "form"> Многострочная информация </TEXTAREA>

<TR><TD VALIGN=top> Независимые переключатели <BR> (checkbox)

<TD><INPUT TYPE=checkbox NAME="ch1" VALUE= "on" CHECKED> 1 <BR>

<INPUT TYPE=checkbox NAME="ch2" VALUE="on" > 2 <BR>

<INPUT TYPE=checkbox NAME="ch3" VALUE="on" CHECKED> 3 <BR>

<TR> <TD VALIGN=top> Зависимые переключатели <BR> (radio)

<TD><INPUT TYPE=radio NAME="rad" VALUE= "on1" CHECKED> Первый <BR>

<INPUT TYPE=radio NAME="rad" VALUE= "on2"> Второй <BR>

<INPUT TYPE=radio NAME="rad" VALUE= "on3"> Третий <BR>

<TR><TD VALIGN=top> Выбор из списка <BR> (select)

<TD><SELECT NAME="sel" SIZE=1 MULTIPLE CLASS="form">

<OPTION VALUE="first"> Пример №1

<OPTION SELECTED VALUE="second"> Пример №2

<OPTION VALUE="third"> Пример №3

<OPTION VALUE="fourth"> Пример №4

</SELECT>

</TABLE>

<P ALIGN=center><INPUT TYPE=reset VALUE= "СБРОС" CLASS="kn">

<INPUT TYPE=submit VALUE="ПЕРЕДАЧА" CLASS="kn">

</FORM>

</BODY>

</HTML>