Виробниче навчання 24.02.15

Робота з формами. Створення навігаційних карт. 

Зображення-карти.

Карти - це спосіб зробити різні частини одного графічного зображення гіперпосиланнями. Вони дозволяють виділити окремі області зображень і визначити для кожної з них свою дію.

Приклад:

<MAP NAME="ImageMap">

<AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Ліва половина">

<AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Права половина">

</MAP>

<!-- Прикріплюємо до зображення-->

<IMG src="img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">

У цьому прикладі ми створили квадратне зображення block.gif розміром 140x140 пікселів, ліва частина якого є посиланням на файл something.html, а права - на файл anything.html.

Як видно, для створення карти нобхідно вставити в тег <IMG SRC=""> атрибут USEMAP="#name", де name - ім'я карти (значок # обов'язковий). У прикладі використовувалася назва ImageMap. Решта атрибутів у цій тезі є стандартною.

Описуємо активні області карти. Вони відкривається тегом <MAP NAME="name"> (тут повторюється ім'я, але вже без значка #), а закінчуємо таким, що закривається тегом </MAP>.

Між цими тегами подаємо опис кожної активної області зображення:<AREA SHAPE="форма" COORDS="координати" HREF="адреса" TITLE="аль-тернативний текст">. Елемент <AREA> має наступні атрибути та їх значення:

Параметр	Характеристика
SHAPE	Описує форму області, що виділяється, можливі значення: RECT – прямокутник; CIRCLE – круг; POLY – багатокутник; DEFAULT - визначає всю область, тобто весь малюнок може стати посиланням.
COORDS	Координати, що визначають розміри і положення області на зображенні. Всі координати відлічуються в пікселях від лівого верхнього кута зображення. Кількість і порядок значень залежить від значення аттрибута SHAPE: RECT: - лівий-X, верхній-Y, правий-X, нижній-Y (тобто спочатку координати лівого верхнього кута, потім правого нижнього); CIRCLE: - центр-X, центр-Y, радіус (тобто горизонтальна і вертикальна координати центру круга і радіус); POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перераховуються координати всіх вершин багатокутника).
NOHREF	Визначає, що цій області не відповідає жодне посилання. Де це може стати в нагоді? Ну, наприклад, якщо ви хочете зробити посилання не у вигляді круга, а у вигляді кільця.
ALT	Альтернативний текст для виділеної області, використовується невізуальними браузерами.
TITLE	Назва виділеної області, виводиться у вигляді підказки, спливаючої при наведенні курсора на область малюнка.
TARGET	Значення цього аттрибута ("_top", "_blank", "_self" або "_parent") визначає, в якому вікні буде відкритий документ (див.наступний пункт).

Для того, щоб розрахувати точно координати потрібної частини зображення існують спеціальні програми. Одна з них називається MapEdit.

2. Створення форми в HTML

2.1 Параметри тега <FORM>

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

Тег <FORM>містить наступні параметри:

·  ACTION - вказує URL-адреса програми (CGI-програми для виконання дій над формою;

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

o    GET - CGI-додаток отримує дані з форми на Web-сторінці через змінну середовища з ім'ям QUERY_STRING;

o    POST - CGI-додаток отримує дані з форми на Web-сторінці через стандартний потік вводу

·  ENCTYPE - вказує MIME-тип передачі даних.

2.2 Параметри тега <INPUT>

Тег <INPUT> містить такі параметри:

·    TYPE - вказує тип органу управління, його значеннями є:

o    text - однорядкове поле для введення текстової інформації; розмір поля і число символів визначається значенням SIZE та MAXLENGTH тега <INPUT>

o    textarea - многострокове поле для введення текстової інформації; розмір поля і число символів визначається значенням SIZE та MAXLENGTH тега <INPUT> (для введення багаторядкових даних предподчтительнее використовувати тег <TEXTAREA>);

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

o    checkbox - незалежний перемикач;

o    radio - перемикач, що залежить від стану інших перемикачів, використовується для вибору одного значення з декількох;

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

o    button кнопка із заданою підписом;

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

o    - має таке ж начначение, що і параметр submit , але у вигляді зображення;

o    hidden - приховане поле, не відображається на екрані, але може бути передано сервера.

·  NAME - вказує ім'я органу управління, надсилається програмі обробки форми;

·  VALUE - вказує значення або стан органу управління;

·  CHECKED - використовується для встановлення початкового стану перемикачів;

·  SIZE - вказує ширину поля для введення текстової інформації, за замовчуванням приймається рівним 20;

·  MAXLENGTH - вказує максимальну кількість символів, які може бути введено в даному полі, за замовчуванням не має обмежень;

·  ALIGN - вказує вирівнювання тексту біля форми;

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

прикладі № 1 показано завдання полів форми на Web-сторінці за допомогою тега <INPUT>.

2.3 Параметри тега <TEXTAREA>

Для введення багаторядкового тексту краще скористатися тегом-контейнером <TEXTAREA> . . . </TEXTAREA>, для якого можна встановити наступні три параметри:

·  NAME - вказує ім'я багаторядкового поля, надсилається програмі обробки форми;

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

·  COLS - вказує розмір поля по горизонталі (стрічки).

прикладі № 1 показано завдання полів форми на Web-сторінці за допомогою тега <TEXTAREA> .

2.4 Параметри тега <SELECT>

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

·  NAME - вказує ім'я списку, яке разом з обраної рядком передається серверу;

·  SIZE - вказує кількість рядків списку, що відображаються на екрані, решта згорнуті і для появи на екрані вимагають прокручування списку;

·  MULTIPLE - вказує на те, що можуть бути відзначені і передані на сервер не один рядок, а всі зазначені.

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

·  SELECTED - відзначає спочатку вибраний рядок;

·  VALUE - задає значення вибраної рядка.

Нижче наводиться приклад використання тегу <SELECT>, в якому задається набір з черырех рядків. На екрані відображаються два рядки: "Example1_2" і "Example1_3", перша з них ("Example1_2") відзначається як обрана. Для доступу до двох інших рядках необхідно виконати прокручування. Відзначити можна будь-яке число рядків з заданого набору.
Кожна зазначена рядок передається на сервер у вигляді пари "ім'я=значення". В якості імені береться ім'я набору, тобто. "number". В якості значення береться значення параметра VALUE, а якщо він не вказаний - текст після тега <OPTION>. Наприклад, для другого рядка на Web-сервер передається пара "number=second", а для третьої рядка, якщо вона буде обрана, - "number=Example1_3".

<SELECT NAME="number" SIZE=2 MULTIPLE>
<OPTION VALUE="first"> Example_1
<SELECTED OPTION VALUE="second"> Example1_2
<OPTION> Example1_3
<OPTION VALUE="fourth"> Example1_4
</SELECT>

прикладі № 1 показано використання і тега <SELECT>на Web-сторінці.

3 Інтерфейс CGI

Як вже зазначалося вище, інтерфейс CGI призначений для обробки даних, заданих на стороні клієнта у вигляді форми на Web-сторінці, за допомогою програми (CGI-програми), розташованої на сервері. Дані та імена полів передаються на сервер в такому форматі:

Имя1 = Значення1&Имя2=Значення2& . . .

При цьому використовується так звана URL-кодування. В цій кодіровці всі символи пробілів замінюються символом "+". Крім того, для подання кодів керуючих клавіш і деяких інших (до їх числа потрапили символи кирилиці) використовується послідовність символів виду %xx, де символи xx являють собою 16-ричный код у вигляді двох ASCII-символів. 
Порядок обробки форми при використанні CGI-інтерфейсу:

·  Користувач заповнює форму на Web-сторінці і натискає кнопку з типом submit (прикладі № 1 вона має ім'я "ПЕРЕДАЧА").

·  Браузер аналізує URL-адреса CGI-додатки, заданий у параметрі ACTION форми і встановлює з'єднання з відповідним Web-сервером (як Web-сервера може бути використаний, наприклад сервер Apache).

·  Web-сервер перетворює URL-адреса в шлях до файлу на комп'ютері і визначає, що URL-адреса вказує на CGI-додаток, а не на статичний файл.

·  Web-сервер готує змінні оточення і запускає CGI-додаток на виконання.

·  Ця програма відповідно до заданого методом передачі даних на сервер (GET або POST) визначає змінні оточення і зчитує дані у вигляді пар "ім'я=значення", здійснюючи, якщо необхідно, їх перекодування.

·  Програма виводить на стандартний потік виводу HTTP-заголовок і результати обробки даних форми у вигляді динамічно створеного HTML-документа.

·  Web-сервер передає браузеру отриманий документ і закриває з ним з'єднання.

·  Браузер відображає отримані дані на екрані у вигляді Web-сторінок.

У прикладі №1 наведено HTML-документ, який реалізує на екрані різні види органів управління форми, заданої на Web-сторінці.
Клацнувши по кнопці "Приклад №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> Форми в HTML на Web-сторінці </TITLE>
<LINK REL=stylesheet HREF=""> <STYLE>
.form{background:#a0ffff;color:#004000;font-size:6mm}
.kn{background:#e0e0ff; border:outset 4 blue; font-size:4,5 мм}
</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
<SELECTED OPTION 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>

Перед тим як "натиснути" кнопку "ПЕРЕДАЧА", здійснивши передачу даних з форми CGI-додаток і його запуск для обробки даних, необхідно виконати наступне:

1. Всі файли, що містять HTML-документи з використанням CGI-інтерфейсу, повинні знаходиться в підкаталозі "C:\Temp\Apache". Це обмеження пов'язано з налаштуваннями Web-сервера Apache і тим, хто не має достатнього практичного досвіду роботи з цим сервером, краще не займатися зміною його параметрів. Тому файл "prim5-1.htm", що містить, наведений у прикладі №1 HTML-документ, а також всі створені файли, що містять документи з використанням CGI-інтерфейсу, повинні бути скопійовані в папку "C:\Temp\Apache".

2. Необхідно розробити CGI-додаток, що обробляє дані з форми, у вигляді виконавчого файлу з ім'ям, зазначеним у параметрі ACTION форми (у прикладі №1 - це файл "form_cgi.exe"). Цей файл повинен бути поміщений в підкаталог "C:\Temp\Apache\cgi-bin". Ця умова також пов'язано з налаштуваннями Web серверу. Зазначимо, що в параметрі ACTION необхідно вказувати повну адресу файлу, включаючи IP-адреса сервера, як показано в прикладі №1 для комп'ютера №5 (для комп'ютера №4 IP-адреса буде 172.17.72.24 і т.д.).