Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Опис форми




Створення форм

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

Кожна форма містить органи керування, за допомогою яких користувач може вводити текстові або числові значення, вибирати рядка зі списків. У формі можуть розташовуватися перемикачі, звичайні або графічні кнопки.

Для того щоб зробити форму в документі HTML, ви повинні скористатися оператором <FORM>. Цей оператор застосовується в парі з оператором </FORM>, що завершує опис форми. Між оператора

ми <FORM> і </FORM> знаходяться описи органів керування у виді операторів <INPUT>, <TEXTAREA> і <SELECT> із відповідними параметрами.

От приклад визначення найпростішої форми:

<FORM METHOD=GET ACTI0N="http://www.myserver.ru/frolov-cgi/form.exe">

<TABLE>

<TR>

<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of text1"></TD>

</TR>

<TR>

<TD><INPUT TIPE=text NAME=text2" VALUE="Sample of text2"></TD>

</TR>

<TR>

<INPUT TYPE=submit VALUE="Send">

</TR>

</TABLE>

</FORM>

Тут органи керування розміщаються в таблиці, що складається з одного стовпчика і трьох рядків. У верхніх двох рядках ми розмістили поля для запровадження і редагування тексту, в останньому рядку - кнопку з назвою Send.

Перерахуємо припустимі параметри оператора <FORM>:

Параметр Опис

ACTION Адреса URL для виконання дій над формою

METHOD Засіб передачі даних із форми в сервер WWW

ENCTYPE Тип MIME переданих даних

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

За допомогою параметра METHOD ви можете вибрати один із двох методів передачі даних із форми серверу WWW. Якщо значення цього параметра дорівнює GET (як у нашому прикладі), програма CGI, зазначена в параметрі ACTION, одержить дані з форми через переменную середовища з ім'ям QUERY_STRING. У тому випадку, коли значення параметра METHOD дорівнює POST, програма CGI одержить дані з форми через стандартний потік запровадження. Пізніше ми роздивимося розходження між цими методами більш докладно.

І нарешті, третій параметр - ENCTYPE використовується дуже рідко і тільки для методу POST. Він дозволяє зазначити тип переданих даних і по умовчанню має значення application/x-www-form-urlencoded.

5.1.2. Створення органів керування для форми

Для створення у формі різноманітних органів керування (поляж запровадження, перемикачів, кнопок і т.д.) використовуються оператори <INPUT>, <TEXTAREA> і <SELECT>.

Оператор <INPUT>

Оператор <INPUT> призначений для вставки у форму таких органів керування, як поля запровадження текстової інформації, перемикачі, кнопки (звичайні й у виді графічних зображень), а також органи керування для передачі локального файла через навігатора у віддалений сервер WWW.

Перерахуємо параметри оператора <INPUT>:

Параметр Опис

TYPE Тип органа керування. У залежності від значення цього параметра будуть створюватися різноманітні органи керування (кнопки, перемикачі і т.д.)

NAME Ім'я органа керування. Це ім'я посилається програмі опрацювання форми і використовується для визначення стана органа керування (для перемикачів) або одержання інших даних (наприклад, для одержання рядка, введеної в текстовому полі)

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

CHECKED Цей параметр використовується для установки початкового значення перемикачів

SIZE Ширина поля для запровадження текстової інформації в символах. По умовчанню поле має ширину 20 символів

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

ALIGN Вирівнювання тексту, розташованого біля форми

SRC Адреса URL графічного зображення, якщо воно використовується в органі керування

Параметр TYPE визначає тип утворюваного органа керування і може мати такі значення:

Значення Тип органа керування параметра TYPE

TEXT Однострочное поле для запровадження текстової інформації. Розмір цього поля визначається параметрами SIZE і MAXLENGTH

TEXTAREA Многострочное поле для запровадження текстової інформації. Розмір поля також визначається параметрами SIZE і MAXLENGTH

PASSWORD Цей орган керування призначений для запровадження такої інформації, як пароли. Він аналогічний органу керування типу TEXT, але відрізняється тим, що текст, уведений користувачем, не відображається на екрані

CHECKBOX Перемикач типу Check Box. Призначений для використання в наборі незалежних друг від друга перемикачів або окремо

RADIO Перемикач для групи залежних перемикачів. Використовується для вибору одного значення з декількох

FILE Орган керування для вибору і передача файла. Це значення використовується по-різному навігаторами Microsoft Internet Explorer і Netscape Navigator

BUTTON Кнопка з заданим написом

SUBMIT Кнопка, що призначена для посилки даних із заповненої форми серверу WWW. Напис на цій кнопці також можна задавать

RESET С поміччю цієї кнопки користувач може скинути вміст поляж запровадження і стан перемикачів у їхні початкові значення, задані операторами VALUE

IMAGE Для посилки даних із форми в сервер ви можете використовувати не тільки кнопку типу SUBMIT, але і довільне графічне зображення, задане параметром SRC. Відповідний графічний орган керування має тип IMAGE

HIDDEN Сховане поле, що не відображається. Вміст цього поля посилається серверу і може бути проаналізоване

Оператор <TEXTAREA>

Оператор <INPUT> із параметром TYPE, що має значення TEXT, дозволяє вставити у форму поле редагування текстового рядка. Якщо ж вам потрібно ввести багаторядковий текст, краще скористатися оператором <TEXTAREA>, що застосовується разом з оператором </TEXTAREA>.

Зауважимо, що, хоча параметр TYPE оператора <INPUT> дозволяє задати багаторядкове поле редагування з типом TEXTAREA, створене в такий спосіб поле працює як однорядкове.

Для оператора <TEXTAREA> ви можете задати 3 параметр:

Параметр Опис

NAME Ім'я багаторядкового поля, що посилається програмі опрацювання форми і використовується для одержання введених рядків тексту

ROWS Розмір поля по вертикалі (у рядках)

COLS Розмір поля по горизонталі (у символах)

Нижче наведено приклад опису багаторядкового текстового поля:

<TEXTAREA NAME="multi" ROWS=54 COLS=60>

Це зразок багаторядкового тексту

</TEXTAREA>

 

Оператор <SELECT>

За допомогою оператора <SELECT> ви можете вставити у форму заздалегідь проинициализированный список довільних текстових рядків. Обраний рядок пересилається серверу WWW поряд із вмістом інших полів форми.

Для оператора <SELECT> визначено 2 параметр - NAME і SIZE. Параметр NAME задає ім'я списку, що передається серверу WWW у парі з обраним рядком. За допомогою параметра SIZE можна задати висоту списку в рядках.

Нижче ми призвели приклад використання оператора <SELECT>:

 

<SELECT NAME="number">

<ОРТIОN>Перший

<OPTI0N SELЕСТЕD>Другий

<ОРТI0N>Третій

<OРТI0N>Останній

</SELECT>

 

Для запису рядків у список тут використовується оператор <OPTION>. Рядок, відзначений параметром SELECTED, буде обрана в списку по умовчанню.

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>

<BODY BGCOLOR=#FFFFFF>

<FORM METHOD=POST ACTION="http://www.someserver.ru/frolov-cgi/controls.exe">

<TABLE>

<TR>

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

<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of textl" SIZE=30></TD>

</TR>

<TR>

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

<TD><INPUT TYPE=password NAME="pwd" VALUE="Sample of 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>

<SELECT NAME="sel" SIZE=”1”>

<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>

<INPUT TYPE=HIDDEN NAME="hid" VALUE="Hidden"></TD>

</TR>

</TABLE>

<BR>

<INPUT TYPE=submit VALUE="Send">&nbsp;

<INPUT TYPE=reset VALUE="Reset">

<P><INPUT TYPEIMAGE SRC="$end.gif" BORDER=0>

</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:

 

<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of text1" SIZE=30></TD>

 

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

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

 

<TD><INPUT TYPE=password NAME=”pwd" VALUE=”Sample of password"></TD>

 

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

Для запровадження многострочного тексту в третьому рядку таблиці за допомогою оператора <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>, як це показано нижче:

 

<ТЕ>

<SELECT NAME="Sel" SIZE="1">

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

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

<OPTION Value="None">None S«lec1ed</OPTI0N>

</SELECT>

</TD

 

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

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

 

<TD><INPUT TYPE=HIDDEN NAME="hid" VALUE="Hidden"></TD>

 

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

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

 

<BR>

<INPUT TYPE=submit VALUE="Send">&nbsp;

<INPUT TYPE=reset VALUE="Reset”>

<P><INPUT TYPE=IMAGE SRC=”send. gif” BORDER=0>

 

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

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

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

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

5.2. Передача даних програмі CGI

Коли користувач заповнює форму і натискає на кнопку типу SUBMIT або на графічну кнопку (який виконує аналогічну функцію), дані з полів форми разом з іменами цих полів передаються навігатором серверу WWW. Сервер у свою чергу аналізує ці дані і запускає відповідну програму CGI, шлях до файла якої зазначений в операторі <FORM>.

Перед запуском програми CGI сервер WWW вибирає в залежності від значення параметра METHOD оператора <FORM> один із двох засобів передачі отриманих даних для опрацювання. Це методи GET і POST.




Поделиться с друзьями:


Дата добавления: 2014-12-07; Просмотров: 366; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.077 сек.