2.1.2 Форми

Форма – це особлива частина «тіла» документа HTML. Вона дозволяє вводити текст і здійснювати вибір зі списків або за допомогою кнопок. Форма працює разом із установленим на web-сервері сценарним додатком, що обробляє введену інформацію. Звичайно взаємини між формою й програмою, яка оброблює її дані, регулюються стандартом CGI. CGI працює як канал, по якому передається інформація з форми процесу, що обробляє її дані.

Для створення елементів форми використовуються дескриптори (теги) і деякі спеціальні елементи, відомі як елементи керування.

Існує кілька ключових елементів форм і ряд зв'язаних з ними атрибутів, які необхідно знати для створення форм.

• <FORM>…</FORM>—це фундаментальні елементи усіх форм, дескриптори, що відкривають і закривають форму. Форма може мати кілька атрибутів. Основні з них — action, що як значення приймає URL для передачі на вузол інформації з форми, і method, що приймає значення get чи post. Ці значення визначають спосіб передачі даних форми вузлу.

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

• type="x" — визначає елемент керування;

• name="x" — ім'я елемента керування;

• value="x" — значення елемента керування; цей атрибут є необов'язковим для всіх керуючих елементів, крім перемикача (radio);

• size="x" — ширина поля елемента керування в пикселях; для елементів text і password ширину поля визначають у символах;

• maxlength="x" — гранична кількість символів, що приймає елемент керування;

• checked="x" — відзначений прапорець (перемикач);

• src="х" — покажчик на рисунок, використовуваний у формі як графічна кнопка.

• <TEXTAREA>…</TEXTAREA>—цей елемент створює текстову область з розширеними можливостями. Він подібний елементу керування, але, крім атрибутів, їм може керувати розміщений між дескрипторами текст. Крім уже відомого атрибута name приймає атрибути rows="x", де "х" визначає кількість рядків області, і cols="x", де "х" визначає її ширину.

• <SELECT>…</SELECT>—цей елемент створює меню. У залежності від використовуваних атрибутів, меню може бути випадаючим або представленим у вигляді списку. Якщо потрібно надати відвідувачу вузла можливість вибору декількох елементів, використовується атрибут multiple.

• <OPTION>…</OPTION>—цей дескриптор визначає кожен елемент списку меню окремо. Застосовуються обидва дескриптори – відкриваючий і закриваючий.

Екранні керуючі елементи визначають спосіб введення інформації. Синтаксично елементи являють собою значення атрибута type дескриптора <INPUT>. Далі перераховані доступні керуючі елементи.

• text — поле введення тексту, що складається з одного рядка. Ширину поля визначає значення атрибута size.

• password — поле, подібне до поля введення тексту text. Відмінність полягає в тім, що введені відвідувачем вузла символи відображаються у вигляді символів ’*’.

• checkbox — прапорець, що приймає два логічних значення. Можна створити групу з декількох прапорців; при цьому всі вони можуть бути відзначені.

• radio — перемикач. На відміну від прапорця, з декількох перемикачів, що утворюють групу, може бути обраний лише один.

• submit — кнопка, натискання якої означає підтвердження вибору і відправлення інформації на Web-вузол. Напис на кнопці визначається установкою значення її властивості value.

• reset — кнопка, натискання якої означає скидання поточних значень елементів керування й установку значень за замовчуванням.

• file — дозволяє створити кнопку виклику діалогового вікна вибору файлу.

• hidden — схований елемент керування, що не представлений яким-небудь зображенням на формі. Звичайно сховані елементи використовують з метою автоматичного введення додаткових даних для передачі Web-вузлу.

• image — елемент, що дозволяє вставити зображення і використовувати його для підтвердження вибору або скидання замість кнопки submit і reset.

• button — кнопка. Для роботи кнопці вимагаються зв'язані з нею сценарії.

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

Відкриваючий дескриптор <FORM> визначає спосіб, яким передається інформація сценарному додатку сервера, й ім'я цього додатка.

У нашому випадку форма буде зберігатися у файлі calculate.html, а скрипт – у calculate.php.

Файл calculate.html:

<HTML> <HEAD>

<TITLE>Форма Калькулятора</TITLE>

</HEAD>

<BODY>

<FORM METHOD="post" ACTION="calculate.php">

<P>Значення 1:

<INPUT TYPE="text" NAME="val1" SIZE=10></P>

<P>Значення 2:

<INPUT TYPE="text" NAME="val2" SIZE=10></P>

<P>Дія:<br>

<INPUT TYPE="radio" NAME="calc"

VALUE="скласти"> скласти <BR>

<INPUT TYPE="radio" NAME="calc"

VALUE="відняти"> відняти <BR>

<INPUT TYPE="radio" NAME="calc"

VALUE="помножити"> помножити <BR>

<INPUT TYPE="radio" NAME="calc"

VALUE="розділити"> розділити </P>

<P>

<INPUT TYPE="submit" NAME="submit"

VALUE="Обчислити"> </P>

</FORM>

</BODY> </HTML>

Форма буде виглядати так:

Рисунок 2.2 – Форма калькулятора (файл calculate.html)

Дані з форми будуть передаватися методом POST на обробку сценарію calculate.php. Якщо користувач увів недостатню кількість інформації, то треба повторно викликати сторінку calculate.html, у протилежному випадку – занести в змінну результат обчислення і вивести його на екран:

<? /* Calculate.php */

if (($_POST['val1'] == "") ||

($_POST['val2'] == "") ||

($_POST['calc'] == "")) {

header("Location:

http://127.0.0.1/calculate.html");

exit;

}

if ($_POST['calc'] == "скласти") {

$result = $_POST['val1'] + $_POST['val2'];

} elseif ($_POST['calc'] == "відняти") {

$result = $_POST['val1'] - $_POST['val2'];

} elseif ($_POST['calc'] == "помножити") {

$result = $_POST['val1'] * $_POST['val2'];

} else {

$result = $_POST['val1'] / $_POST['val2'];

}

?>

<HTML>

<HEAD>

<TITLE>Результат обчислення</TITLE>

</HEAD>

<BODY>

<P> Результат: <? echo "$result"; ?> </P>

</BODY>

</HTML>