12. Форми

Форма - це засіб, що дозволяє організувати в сторінці діалог з її користувачем.

Розробник сторінки створює її за допомогою спеціальних елементів:

- кнопки,

- списки,

- текстові рядки,

- текстові поля.

Форми передають інформацію програмі обробки у вигляді пар:

Ім'я поля - Значення поля.

Форма починається командою <FORM> і закінчується командою </FORM>.

Дана команда має 2 основних параметра: ACTION і METHOD.

Параметр ACTION є обов'язковим. Він вказує адресу обробника форми (наприклад, адреса програми обробки або поштова адреса або просто адреса URL для переходу).

Параметр METHOD не є обов'язковим. Він приймає одне з двох значень: GET або POST, пов'язаних з методом протоколу передачі інформації з анкети.

По замовчанню, METHOD= GET.

Приклад команди FORM:

<FORM ACTION = «http://www.aport.ru» METHOD= POST >

Для завдання керуючої кнопки запуску передачі даних треба записати наступну команду:

<INPUT TYPE = submit NAME = «botton1» VALUE = «Довільний текст»>

де:

INPUT - команда створення керуючого елемента.

TYPE - параметр, що визначає керуючий елемент.

submit - значення цього параметра (в цьому випадку керуюча кнопка).

NAME - параметр, задаючий ім'я змінної.

botton1 - ім'я змінної.

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

Довільний текст - значення тексту на керуючому елементі.

Нижче приводяться основні типи керуючих елементів INPUT.

1) Текстовий рядок: TYPE=text визначає вікно для введення одного рядка тексту.

Параметр SIZE задає розмір вікна в символах.

Приклад:

<INPUT TYPE = text NAME= «text1» SIZE = 30 VALUE = «Введіть текст»>

У отримане вікно, в якому буде зображатися текст: Введіть текст.

Ви можете ввести будь-який текст або залишити записаний початковий текст «Введіть текст» без змін.

При натисненні кнопки submit в програму обробки буде передано:

text1=Ввести текст (або інший, змінений текст).

Параметр SIZE задає розмір вікна в символах.

При необхідності обмежити довжину тексту N, застосовуйте додатковий параметр: MAXLENGTH= N.

2) Вікно для введення пароля: TYPE=password

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

Приклад. Треба ввести пароль довжиною не більше за 5 символів.

<INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >

3) Текстове вікно: TEXTAREA

Задається в наступному вигляді: <TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL> Спочатку заданий текст </TEXTAREA>

Параметр COLS задає кількість символів в рядку, параметр ROWS задає кількість рядків у вікні, необов'язковий параметр WRAP=VIRTUAL задає лінійку прокрутки.

4) Радіокнопка: TYPE=radio

Може бути задано декілька радіокнопок з однаковим ім'ям (тобто значенням параметра NAME), але вони будуть взаємовиключаючими: може бути натиснена (CHECKED) тільки одна з них.

Приклад:

<INPUT TYPE = radio NAME = color VALUE = «Червона» checked> Червона

<INPUT TYPE = radio NAME = color VALUE = «Синя» > Синя

<INPUT TYPE = radio NAME = color VALUE = «Зелена» > Зелена

Ми отримали 3 кнопки, з них відмічена Червона. При натисненні на іншу кнопку попередня звільняється.

Допустимо, ми натиснули Синю кнопку, тоді при натисненні на кнопку submit в програму обробки буде введено:

color=Синій

5) Помічений квадрат: TYPE=checkbox

На відміну від радіокнопок, може бути декілька квадратів з однаковими іменами.

Наприклад, в наступному прикладі спочатку задана кнопка «Горілка»:

<INPUT TYPE = checkbox NAME = box VALUE = «Горілка» checked> Горілка

<INPUT TYPE = checkbox NAME = box VALUE = «Коньяк» > Коньяк

<INPUT TYPE = checkbox NAME = box VALUE = «Лікер» > Лікер

Якщо Ви натиснете ще на кнопку «Коньяк», то при натисненні на кнопку submit в програму обробки буде введено:

box=Горілка

box=Коньяк

1.Прихований текст: TYPE=hidden

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

7) Меню: SELECT

Нехай Вам представилася можливість вибрати одну з путівок у відповідності з наступним списком:

<SELECT NAME= «script»>

<OPTION VALUE = «tour1» > Путівка в Сочи

<OPTION VALUE = «tour2» > Путівка в Париж

<OPTION VALUE = «tour3» > Путівка на Колиму

Якщо Ви вибрали Путівку в Париж, то при натисненні на кнопку submit в програму обробки буде введено: script = tour2

Команда SELECT може містити атрибут MULTIPLE, при якому можна вибрати декілька елементів меню одночасно.

Висоту вікна можна задати атрибутом SIZE= N.

Якщо в рядку OPTION заданий атрибут checked, то даний елемент задається по замовчанню.

8) Кнопка введення: TYPE=submit

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

<INPUT TYPE = submit VALUE = «Введення даних» >

9) Кнопка скасування: TYPE = reset

Кнопка виконує ініціалізацію початковими значеннями всіх полів.

<INPUT TYPE=reset VALUE= «Очистити поля» >