ІНТЕРНЕТ В БІЗНЕСІ

5.1.3. Приклад документа html із формою

Форми краще вивчати на конкретному прикладі. У цій главі ми створимо форму, що містить майже всі органи керування, і роздивимося вихідний текст відповідного документа HTML.

Цей вихідний текст приведений у лістингу:

Листинг 7.1. Файл chap7\controls\controls. htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Органи керування у формах</ТITLЕ>

</HEAD>

<TABLE>

<TR>

<TD VALIGN=TOP> Текстове поле ТЕХТ</ТD>

</TR>

<TR>

<TD VALIGN=TOP>Текстове поле PASSWORD</TD>

</TR>

<TR>

<TD VALIGN=TOP> Текстове поле TEXTAREA</TD>

<TD><TEXTAREA NAME="text2" ROWS=4 COLS=30>Sample of text</TEXTAREA></TD>

</TR>

<TR><TD VALIGN=ТОР>Перемикачі СНЕСКВОХ</ТD>

<TD>

<INPUT TYPE=CHECKBOX NAME="chk1" VALUE="on" CHECKED>Перший <BR>

<INPUT TYPE=CHECKBOX NAME="chk2" VALUE="оn">Другий<ВR>

<INPUT TYPE=CHECKBOX NAME="chk3" VALUE="on" СНЕСКЕD>Третій<ВR>

</TD>

</TR>

<TR><TD VALIGN=TOP>Перемикачі RADIO</TD>

<TD>

<INPUT TYPE=RADIO NAME="rad" VALUE="on1" СНЕСКЕD>Перший<ВR>

<INPUT TYPE=RADIO NAME="rad" VALUE="on2">Bтoрой<BR>

<INPUT TYPE=RADIO NAME="rad" VALUE="оn">Третій<ВR>

</TD>

</TR>

<TR><TD VALIGN=TOP>Список</TD>

<TD>

<0PTION Value="First Option">First Option</OPTION>

<OPTI0N Value="Second Option">Second Option</OPTI0N>

<OPTION Value="None">None Selected</OPTION>

</SELECT>

</TD>

</TR>

<TR>

<TD VALIGN=ТОР>Схований орган керування</ТЕ>

<TD>

</TR>

</TABLE>

<BR>

</FORM>

</BODY>

</HTML>

Оператор <FORM> тут має 2 параметр - METHOD і ACTION:

Параметр METHOD має значення POST і задає засіб передачі даних програмі CGI через стандартний потік запровадження.

У параметрі ACTION зазначений шлях до завантажувального файла програми CGI, що знаходиться в каталозі frolov-cgi серверу WWW з адресою http://www.someserver.ru.

Програми CGI (а також розширення серверу WWW у виді бібліотек динамічного компонування DLL з інтерфейсом ISAPI, що будуть розглянуті в такій главі) можуть знаходитися не в будь-якому каталозі серверу WWW, а тільки в такому, для якого дозволене виконання програм. Якщо створюється виртуальный сервер WWW, що фізично розташовується в постачальника послуг Internet, можливо, вам прийдеться одержати дозвіл на створення або використання такого каталога.

Тепер можна зайнятися органами керування.

Всі органи керування розміщені в таблиці. У першому рядку цієї таблиці знаходиться однострочное поле для запровадження тексту, що вставлений у форму оператором <INPUT> і мають тип TEXT:

Ім'я поля зазначено в параметрі NAME як "text1”. У якості початкового значення для поля параметром VALUE заданий рядок "Sample of text1” Цей рядок можна буде редагувати після відображення форми. Також зазначений розмір поля, рівний 30 символам, параметром SIZE.

В другому рядку таблиці також за допомогою оператора <INPUT> визначене поле для запровадження пароля:

При запровадженні символів у цьому полі вони не відображаються. Аналогічно не відображається і початковий рядок, використаний для ініціалізації поля.

Для запровадження многострочного тексту в третьому рядку таблиці за допомогою оператора <TEXTAREA> розміщена область запровадження тексту:

<TD><TEXTAREA NAME="text2" ROWS=4 COLS=30>Sample of text</TEXTAREA></TD>

Ім'я цього поля задане як "text2". Поле має висоту, рівну чотирьом рядкам (параметр ROWS дорівнює чотирьом), і ширину, рівну 30 символам (параметр COLS дорівнює 30).

У четвертому рядку таблиці розташована група з трьох незалежних перемикачів типу CHECKBOX:

<TD>

<INPUT TYPE=CHECKBOX NAME="chk1" VALUE="on" СНЕСКЕD>Перший<ВР>

<INPUT TYPE=CHECKBOX NAME="chk2" VALUE="on">Другий<BR>

<INPUT TYPE=CHECKBOX NAME="chk3" VALUE="on" СНЕСКЕD>Третій<ВР>

</TD>

Кожний із цих перемикачів має власне ім'я, задане параметром NAME. Оператор VALUE задає значення, що буде послано в сервер WWW при вмиканні перемикача. До речі, якщо перемикач виключений, він не посилає в сервер WWW ніяких даних.

Нижче, у пятой рядку, знаходиться група з трьох перемикачів типу RADIO із залежною фіксацією:

<ТD>

<INPUT TYPE=RADIO NAME=*rad" VALUE="on1" СНЕСКЕD>Перший<ВR>

<INPUT TYPE=RADIO NAME="rad" VALUE="on2">Другий<ВR>

<INPUT TYPE=RADIO NAME="rad" VALUE="on3">Tpетий<BR>

</TD>

Всі перемикачі, що ставляться до одной' групи, повинні називатися однаково. У даному випадку за допомогою параметра NAME задано для всіх трьох перемикачів ім'я "rad".

Перший перемикач включений по умовчанню, тому що для нього заданий параметр CHECKED.

Для того щоб при аналізі даних, отриманих від форми, програма CGI могла визначити, який із перемикачів, що входять у групу, був включений, задано для кожного перемикача своє значення параметра VALUE.

Шостий рядок таблиці містить список, що складається з трьох рядків. Цей список визначений за допомогою операторів <SELECT> і <OPTION>, як це показано нижче:

<ТЕ>

<OPTION Value="first Option">First Option</OPTION>

<OPTI0N Value="Second Option">Second Option</OPTION>

</SELECT>

</TD

Ім'я списку задане як "sel", а висота його дорівнює одному рядку. Вміст рядків списку задається за допомогою параметра VALUE відповідних операторів <OPTION>.

Останній рядок таблиці містить схований орган керування, що не відображається у вікні навігатора:

Орган посилає серверу WWW рядок "Hidden", задану в параметрі VALUE.

Під таблицею у формі розташовані три кнопки, перші дві з який стандартні, а третя зроблена за допомогою графічного зображення. Ці кнопки вставлені за допомогою оператора <INPUT> у такий спосіб:

<BR>

Кнопка типу SUBMIT має напис Send і призначена для посилки даних із форми в сервер WWW для опрацювання програмою CGI.

Кнопка типу RESET призначена для того, щоб користувач, зрадивши дані у формі, міг знову повернутися до значень, заданим по умовчанню за допомогою параметра VALUE в операторах визначення органів керування. Ця кнопка має напис Reset.

Остання кнопка має тип IMAGE. Її зображення знаходиться у файлі send.gif, адреса URL котрого (у даному випадку це просто ім'я файла) зазначений у параметрі SRC. Для того щоб навколо зображення кнопки не було рамка, зазначена нульове значення параметра BORDER.

Програма CGI одержить від графічної кнопки координати точки, у якій знаходився курсор миші в момент натискання на цю кнопку. Таким чином, можливо створення кнопки у виді сегментированного графічного зображення. Програма CGI зможе визначити, у якій області зображення був зроблений щиголь мишею при відправленні заповненої форми на опрацювання.

Содержание