4. Формы и фреймы

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

4.1. Использование форм в документах

Формы на WEB -страницах используются для организации обмена данными между пользователем броузера и Web-сервером. Данные, введенные пользователем в формах ввода, передаются при помощи специальных методов технологии клиент/сервер, в CGI сценарий обработки данных Web-сервера (См. раздел 5.1.).

Для размещения форм в HTML применяется контейнерный тег <FORM>...</FORM>, заключающий в себе составные элементы формы: текстовые поля, списки, поля ввода данных, флажки, переключатели и кнопки. Тег <FORM> имеет следующие атрибуты:

NAME - имя формы;
METHOD - метод отправки данных на сервер. GET - передача данных посредством переменных окружения сервера, POST - передача данных в стандартном потоке ввода/вывода сервера;
ACTION - URL получателя данных. В качестве получателя данных может выступать CGI сценарий обработки данных или ссылка на адрес электронной почты - mailto:e-mail;
TARGET - окно назначение для отображения результатов обработки данных на Web-сервере (по умолчанию текущее окно);

Например:

<FORM NAME="Order" METHOD="GET" ACTION="/cgi-bin/get_order.pl"> </FORM>

<FORM NAME="Comment" ACTION="mailto:mybox@mymail.ru"></FORM>

Кроме вышеперечисленных элементов форм в контейнере <FORM>...</FORM> могут находиться теги HTML задающие форматирование элементов формы и ее структуру. Рассмотрим элементы форм:

Текстовые панели

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

NAME - имя элемента формы;
TITLE - подсказка в стиле ToolTip;
TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;
ROWS - число строк текстовой панели;
COLS - число столбцов текстовой панели;
READONLY - содержимое текстовой панели не редактируется;
DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);

Пример:

<FORM NAME="txa_form">

<TEXTAREA NAME="ta1" TITLE="Textarea 1" ROWS=3 COLS=25> Текстовая панель 1 </TEXTAREA>

<TEXTAREA NAME="ta2" TITLE="Textarea 2" ROWS=3 COLS=25 READONLY> Текстовая панель 2 </TEXTAREA>

<TEXTAREA NAME="ta3" TITLE="Textarea 3" ROWS=3 COLS=25 DISABLED> Текстовая панель 3 </TEXTAREA>

</FORM>

Раскрывающиеся списки

Раскрывающиеся списки определяются при помощи контейнерного тега <SELECT>...</SELECT>. Для определения параметров раскрывающегося списка, применяются следующие атрибуты:

NAME - имя элемента формы;
TITLE - подсказка в стиле ToolTip;
TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;
SIZE - длина списка (число строк раскрывающегося списка );
MULTIPLE - выбор значений в списке с данным атрибутом осуществляется в прокручиваемом окне;
DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу );

Элементы списка задаются при помощи тега <OPTION>, со следующими атрибутами:

VALUE - значение для отправки серверу (значение отображаемое в списке задается после тега <option>);
SELECTED - данный атрибут задает элемент отображаемый как начальный выбор в списке;

Пример:

<FORM NAME="sel_form">

<SELECT NAME="sel1" TITLE="Select 1" SIZE=1> <OPTION VALUE="DJ310" SELECTED>HP Desk Jet 310 <OPTION VALUE="DJ440">HP Desk Jet 440 <OPTION VALUE="DJ690">HP Desk Jet 690 </SELECT>

<SELECT NAME="sel2" TITLE="Select 2" SIZE=1 DISABLED>  <OPTION VALUE="FX1170" SELECTED>Epson FX-1170 <OPTION VALUE="LX300">Epson LX-300 <OPTION VALUE="LX100">Epson LX-100 </SELECT>

</FORM>

Поля ввода данных, флажки, переключатели и кнопки

Данные элементы форм определяются при помощи тега <INPUT>. Тип элемента задается при помощи атрибута TYPE, который может принимать следующие значения:

TEXT - текстовое поле ввода;

PASSWORD - поле ввода пароля (вводимые символы заменяются звездочками );

CHECKBOX - элемент флажок;

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

BUTTON - элемент управления-кнопка (используется для выполняется сопоставленного ей обработчика события onClick - сценария интерактивного управления, выполняемого броузером );

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

SUBMIT - элемент управления-кнопка при нажатии нам которую броузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action ), заданным методом (атрибут method).

Для определения параметров элементов и их значений, применяются следующие атрибуты:

NAME - имя элемента формы. Элементы переключатели (radio) с одинаковым значением данного атрибута, объединяются в группу переключателей, работающих по принципу - выбор одного варианта из многих;
TITLE - подсказка в стиле ToolTip;
TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;
SIZE - размер поля ввода для элементов текстовых полей (text) и полей ввода пароля (password);
MAXLENGHT - максимальная длина данных для элементов текстовых полей (text) и полей ввода пароля (password);
VALUE - для элементов кнопок (button, reset, submit) задает надпись, для элементов полей ввода (text, password) задает начальное значение поля, а для флажков и переключателей (radio, checkbox) задает значение передаваемое на обработку серверу;
CHECKED - атрибут включает флажок или переключатель;
READONLY - используется для запрета редактирования элементов полей ввода (text, password);
DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);

Пример:

<FORM NAME="inp_form">

<INPUT TYPE="text" NAME="text1" SIZE=20 MAXLENGTH=30>

<INPUT TYPE="password" NAME="pass1" SIZE=5 MAXLENGTH=5>

<INPUT TYPE="checkbox" NAME="cbox1" VALUE="м" CHECKED> мужской <INPUT TYPE="checkbox" NAME="cbox2" VALUE="ж"> женский

<INPUT TYPE="radio" NAME="rad1" VALUE="young"> 10-18 лет <INPUT TYPE="radio" NAME="rad1" VALUE="adult" CHECKED> 19-60 лет <INPUT TYPE="radio" NAME="rad1" VALUE="old"> 60-80 лет <INPUT TYPE="radio" NAME="rad1" VALUE="decrepit" DISABLED> 80-100 лет

<INPUT TYPE="button" NAME="but1" VALUE="Нажми меня">

<INPUT TYPE="reset" NAME="but2" VALUE="Очистка формы">

<INPUT TYPE="submit" NAME="but3" VALUE="Отправить данные">

</FORM>

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

Пример 8. Использование форм ввода данных. [просмотр примера в окне]

<HTML> <HEAD> <TITLE>Использование форм в документах</TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <H1 ALIGN=CENTER>Заполните пожалуйста анкету</H1> <HR> <FORM NAME="anketa" ACTION="mailto:kadr@agency.ru"> <table width="100%" align=center> <col width="35%" align=left valign=top><col align=left valign=top> <tr> <th>Введите ваше ФИО: <td> <INPUT TYPE="text" NAME="fio" SIZE=30 MAXLENGTH=40> <tr> <th>Введите пароль: <td> <INPUT TYPE="password" NAME="pas" SIZE=5 MAXLENGTH=5> <tr> <th>Ваш род занятий: <td> <SELECT NAME="work" TITLE="Род занятий" SIZE=1> <OPTION VALUE="ittec" SELECTED>Инф. технологии <OPTION VALUE="bifin">Бизнес и финансы <OPTION VALUE="other">Прочее </SELECT> <tr> <th>Пол: <td> <INPUT TYPE="radio" NAME="sex" VALUE="men" CHECKED>Мужской <INPUT TYPE="radio" NAME="sex" VALUE="led">Женский <tr> <th>Сведения об образовании: <td> <TEXTAREA NAME="edu" TITLE="Образование" ROWS=5 COLS=30> </TEXTAREA> <tr> <th>Ваши предпочтения<br>(один или несколько вариантов): <td> <INPUT TYPE="checkbox" NAME="cbox1" VALUE="1" CHECKED>все равно<br> <INPUT TYPE="checkbox" NAME="cbox2" VALUE="2">работа с клиентами<br> <INPUT TYPE="checkbox" NAME="cbox2" VALUE="3">работа с документами<br> <INPUT TYPE="checkbox" NAME="cbox2" VALUE="4" DISABLED>работа в одиночку </table> <p align=center><INPUT TYPE="reset" NAME="but2" VALUE="Очистить форму"> <INPUT TYPE="submit" NAME="but3" VALUE="Отправка данных"> </FORM> <HR> <P ALIGN=CENTER>&copy 2001 Вебмастер <A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A> </BODY> </HTML>

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

Ваши вопросы и замечания прошу направлять dmitriy_v_k@hotmail.com
© 2001 Дмитрий Красюк
Дата последней модификации: Пятница Март 30, 2001.