Лабораторна робота №5 Форми

Мета роботи: Навчитися створювати форми і вказувати обробники форм. Навчитися створювати елементи керування формами. Закріпити навички, отримані при створенні таблиць.

Контрольні питання:

1. В який тег розміщують всі елементи керування?

2. Який атрибут тегу <form> вказує на файл, який буде обробляти дані форми?

3. Які існують значення атрибута type в тегу <input>?

4. В чому відмінності тегу <input type="reset"> і <input type="submit">?

5. Як додати на форму перемикач?

6. Для чого призначений тег <textarea>?

7. Скільки тегів необхідно що б вивести на екран поле введення для вказівки шляху до файлу і кнопки огляду?

8. Які існують методи передачі даних форми на сервер?

9. Як здійснюється обробка форм?

10. За рахунок чого перемикачі можна розбивати на групи?

11. Який атрибут тегу <input> дозволяє вказати значення, яке буде заповнено при першому відображенні форми?

12. Для чого призначений атрибут checked

Теоретичні відомості:

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

Як правило, форма працює разом із встановленим на сервері сценарним додатком, що обробляють уведену інформацію. Механізм обробки форм представлено на малюнку 4.1.

Рис 5.1 - Обробка даних форми сервером

Найбільш широко форми застосовуються для пошуку, реєстрації, заповнення анкет, тестів і т.д. Форма визначається за допомогою тегів <form></form>, між якими розташовуються поля введення, кнопки, а також всі необхідні елементи оформлення форми. Для вказівки параметрів в тегу <form> використовуються атрибути (див. таблицю 5.1).

Таблиця 5.1 - Атрибути тегу <form>

Атрибут	Призначення
action	адреса програми або документа, які обробляють дані форми
method	метод передачі даних по протоколу http. Можливі варіанти значень методу: GET - спосіб передачі, коли дані, введені в форму додаються в рядок запиту
name	ім'я форми. Використовується для звертання до форми.
target	ім'я вікна або фрейму, куди оброблювач буде завантажувати результат, що вертається
enctype	тип інформації форми. Різниться у випадку використання символьно-цифрової інформації і у випадку використання файлів

Елементи керування форми

Сама форма служить тільки обов'язковим контейнером для розміщення елементів керування. Зовнішній вигляд елементів керування залежить від встановлених значень атрибутів.

Поле введення.

Однорядкове поле введення використовується, коли необхідно, щоб користувач ввів в форму дані в довільній формі але обмежено за обсягом. Для одержання поля введення використовують тег <input type="text">.

Тег <input> є одним з різнобічних елементів форми і дозволяє створювати різні елементи інтерфейсу та забезпечити взаємодія з користувачем. Головним чином <input> призначений для створення текстових полів, різних кнопок, перемикачів і прапорців.

Основний параметр тегу <input> є вид, що визначає елемент – type (див. таблиця 5.2). Він дозволяє задавати наступні елементи форми: текстове поле (text), поле з паролем (password), перемикач (radio), прапорець (checkbox), сховане поле (hidden), кнопка (button), кнопка для відправлення форми (submit), кнопка для очищення форми (reset), поле для відправлення файлу (file) і кнопка із зображенням (image). Для кожного елемента існує свій список параметрів, які визначають його вид і характеристики.

Крім атрибута type тег <input> має наступні атрибути (див. таблиця 5.2):

Таблиця 5.2 - Атрибути тегу < input >

Атрибут	Призначення
align	визначає вирівнювання, у випадку якщо type="image"
alt	визначає альтернативний текст для кнопки із зображенням (type="image")
checked	попередньо активований перемикач або прапорець
disabled	блокує доступ і зміну елемента (поле недоступне)

maxlength	максимальна кількість символів, дозволених у тексті
name	ім'я поля, призначеного для того, що б відрізняти один елемент керування від іншого. Ім'я може бути зазначене за всіма правилами іменування змінних
readonly	дозволяє тільки читання з текстового елемента керування
size	ширина текстового поля в символах
value	значення елемента. Значення змінної зазначеної в атрибуті пам’яті

Таблиця 5.3 – Параметри атрибуту type

Атрибут	Призначено	Приклад
Radio	Перемикачі визначають поля вибору одного значення з декількох доступних, для кожної позиції перемикача створюється свій тег <input type="radio">. Групуються перемикачі за допомогою однакового імені, що задається атрибутом name.
checkbox	Прапорці використовуються, коли необхідно, щоб користувач вибрав один або кілька варіантів з обмеженого числа варіантів вибору. Прапорці у формі не залежать друг від друга, їх можна встановити або скинути в будь-якій комбінації. Для кожного прапорця необхідно задати своє унікальне ім'я за допомогою атрибута name. Створюються прапорці тегом <input type="checkbox">. Для установки прапорця при завантаженні сторінки необхідно вказати атрибут checked="checked".
submit	Командна кнопка відправлення (type="submit") використовуються для виконання пересилання даних форми на сервер.
reset	Командна кнопка скидання (type="reset") повертає форму до вихідного стану (очищає форму).
file	Поле вибору файлу (type="file") створює поле для вибору файлу, який буде завантажений на сервер разом з інформацією форми. Поруч із полем уведення відображається командна кнопка "Огляд...", що відкриває стандартне діалогове вікно вибору файлу. Якщо форма має на увазі завантаження файлів на сервер, то в атрибутах форми повинні бути встановлені наступні атрибути method="post" і enctype="multipart/form-data".