Форми в HTML | Приклади | Html код форми

ЗАГОЛОВОК

Використання технології "клієнт-сервер" при розробці Web-сторінок
2 Створення форми в HTML
2.1 Параметри тега <FORM>
2.2 Параметри тега <INPUT>
2.3 Параметри тега <TEXTAREA>
2.4 Параметри тега <SELECT>
3 Інтерфейс CGI
Приклад 1

Використання технології "клієнт-сервер" при розробці Web-сторінок

Технологія "клієнт-сервер" передбачає поділ прикладної програми на дві частини - клієнтську, яка виконується на стороні клієнта, та серверну кімнату, яка, відповідно, виконується на стороні сервера.
досі при вивченні HTML розглядалися питання розробки Web-сторінок і їх інтерпретації за допомогою браузера на стороні клієнта. Тому з точки зору технології "клієнт-сервер" створені Web сторінки є клієнтськими додатками. Всі зміни на цих сторінках відбуваються тільки при завантаженні нових Web-сторінок, тому вони називаються пасивними (static).

Щоб зробити Web-сторінку активної (динамічної), необхідно розробити програму, яка виконується на стороні сервера, за допомогою якої відбувається обробка і зміна вмісту Web сторінки.
Одним із засобів, які дозволяють здійснити взаємодія між клиенской і серверної частинами програми, є інтерфейс CGI (Common Gateway Interface - стандартний шлюзовий інтерфейс). Серверна частина програми, що використовує CGI-інтерфейс, називається CGI-додатком.

При використанні CGI-додатків необхідна інформація на Web-сторінці предствляется у вигляді форм.

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

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 кнопка із заданою підписом;
  • submit - кнопка, предначначенная для надсилання даних з заповненої форми Web-серверу;
  • - має таке ж начначение, що і параметр submit , але у вигляді зображення;
  • 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>