Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Лабораторна робота 4 ФОРМИ

Лабораторна робота № 6

Тема:Форми

Мета:

Навчитися користуватися введенням даних у форму, розібратися із заголовками і методами передачі даних за допомогою форм

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

За допомогою описаних нижче елементів ви можете створювати заповнювані анкети, опитувальників і різні поля для введення тексту користувачем з можливістю подальшої відправки заповненої форми на ваш сервер.

Елементи для створення форм:

FORM Створює форму

TEXTAREA Створює поле для введення декількох рядків тексту

SELECT Створює меню в заповнюваній формі

OPTION Створює окремі пункти в меню (див. SELECT)

INPUT Створює поле у формі

FORM

Використовується для створення форми. Необхідна присутність початкового і кінцевого тегів. Усередині елементу FORM дозволяється використовувати більшість HTML-елементів.

Параметри:

NAME - визначає ім'я форми, унікальне для даного документа. Використовується, якщо в документі присутньо декілька форм.

ACTION - обов'язковий параметр. Визначає URL, по якому буде відправлено вміст форми. Це може бути або адреса електронної пошти, або шлях до скрипта сервера, обслуговуючого дану форму.

METHOD - визначає спосіб відправки вмісту форми. Можливі значення GET (за умовчанням) і POST.

ENCTYPE - визначає спосіб кодування вмісту форми при відправці. За умовчанням використовується "application/x-www-form-urlencoded".

TARGET - визначає ім'я вікна, в яке повертається результат обробки відправленої форми. Можливі значення : _self, _parent, _top, _blank або явно вказане ім'я вікна. Докладний опис значень - в параметрі TARGET елементу A.

Text Area

Створює поле для введення декількох рядків тексту. Зазвичай містить текст ініціалізації, який при завантаженні документа спочатку записуватиметься в дане поле. Елемент TEXTAREA повинен розташовуватися усередині елементу FORM.

Параметри:

NAME - обов'язковий параметр. Визначає назву, яка використовуватиметься при ідентифікації поля сервером.

ROWS - визначає кількість рядків тексту, які видимі на екрані.

COLS - визначає ширину текстового поля - в друкарських символах.

WRAP - визначає спосіб перенесення слів в заповнюваній формі

Можливі значення:

off - перенесення слів не відбувається (значення за умовчанням)

virtual - перенесення слів тільки відображається, на сервер же поступає неподільний рядок.

physical - перенесення слів відбуватиметься в усіх точках перенесення.

SELECT

Елемент SELECT створює в заповнюваній формі меню типу "Вибір одного пункту з багатьох" або "Вибір декількох пунктів з багатьох". Повинен розташовуватися усередині елементу FORM і мати як початковий, так і кінцевий теги. Містить декілька елементів OPTION.

Параметри:

MULTIPLE - дає можливість вибору декількох пунктів меню. За умовчанням можна вибрати тільки один пункт меню.

NAME - визначає ім'я меню, унікальне для даної форми, яке буде використовуватись при передачі даних на сервер. Кожен вибраний пункт меню при передачі на сервер матиме вигляд: name/value. Значення (value) формується елементом OPTION.

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

OPTION

Елемент OPTION описує окремі пункти меню. Не має кінцевого тега.

Параметри:

SELECTED - Визначає пункт меню, який буде вибраний спочатку при завантаженні документа. Якщо меню має тип "один з багатьох", то прапором SELECTED може бути помічений лише один пунктів меню.

VALUE - Задає даному пункту значення, яке буде використано разом з іншими відомостями про вміст заповненої форми. При наданні інформації на сервер це значення буде об'єднано із значенням параметра NAME в елементі SELECT.

INPUT

Елемент INPUT створює поле форми (кнопку, поле введення, чекбокс і т.п.), зміст якого може бути змінений або активізований користувачем. Елемент не має кінцевого тега. Елемент INPUT повинен розташовуватися усередині елементу.

Параметри:

NAME - визначає ім'я, використовуване при передачі змісту даної форми на сервер. Цей параметр необхідний для більшості типів (параметр TYPE - див. нижче) елементу INPUT і зазвичай використовується для ідентифікації поля або для групи полий, зв'язаних логічно.

TYPE - визначає тип поля для введення даних. За умовчанням - це "text". Можливі значення:

text - створює поле введення під один рядок тексту. Як правило використовується спільно з параметрами SIZE і MAXLENGTH.

textarea - створює поле введення тексту в декілька рядків. Але для цих цілей краще використовувати елемент TEXTAREA

file - дає можливість користувачеві залучити файл до поточної форми. Можливе використання сумісно з параметром ACCEPT.

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

checkbox - створює поле введення атрибутів типу Boolean ("да"/"нет") або атрибутів, які можуть одночасно приймати декілька значень. Ці атрибути є декілька полий CHECKBOX, які можуть мати однакові імена. Кожне вибране поле CHECKBOX створює окрему пару name/value в інформації, що посилається на сервер, навіть якщо результатом будуть імена, що дублюються. Поле типу CHECKBOX обов'язково повинне мати параметри NAME і VALUE, а також необов'язковий атрибут CHECKED, який указує на те, що поле активізоване.

radio - створює поле введення атрибутів, які приймають одне значення з декількох можливих. Всі кнопки (radio buttons) в групі повинні мати однакові імена, але тільки вибрана кнопка в групі створює пару name/value, яка буде послана на сервер. Як і для полів CHECKBOX, атрибут CHECKED необов'язковий; він може бути використаний для визначення виділеної кнопки в групі кнопок (radio button).

submit - створює кнопку, при натисненні якої заповнена форма посилається на сервер. Параметр VALUE в даному випадку змінює напис на кнопці, зміст якої, задане за умовчанням, залежить від браузера. Якщо параметр NAME вказаний, то при натисненні даної кнопки до інформації, що посилається на сервер, додається пара name/value, вказана для для параметра SUBMIT, інакше пара не додається.

image - створює графічний образ для кнопки, що ініціалізувала передачу даних на сервер. Місцезнаходження графічного зображення можна задати за допомогою параметра SRC. При передачі даних серверу повідомляються координати x і у тієї крапки на зображенні, де було проведено клацання клавішею миші. Координати вимірюються з верхнього лівого кута зображення. При цьому інформація про поле типу image записується у вигляді двох пар значень name/value. Значення name виходить за допомогою додавання до назви відповідного поля IMAGE суфіксів ".x" у разі абсциси, і ".y" у разі ординати.

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

hidden - поля цього типу не відображаються на екрані монітора, що дозволяє розмістити "секретну" інформацію в рамках форми. Зміст цього поля посилається на сервер у вигляді name/value разом з рештою інформації форми. Цей тип може бути використаний для передачі інформації про взаємодію клієнт/сервер.

button - дозволяє створити кнопку в HTML документі, що додає функції при використанні Visual Basic Script або Java Script. Параметр NAME дозволяє задати ім'я даній кнопці, яке може бути використане для якої-небудь функції в скрипті. Параметр VALUE дозволяє задати текст, який буде відображений на кнопці в документі.

ACCEPT - конкретизує тип файлу. Використовується тільки спільно з пара-метром TYPE="file". Значення задається у вигляді MIME.

VALUE - задає текстовий заголовок для полів будь-якого типу, в тому числі і кнопок. Для типів, що мають значення виду Boolean (відмічений або невідмічений), таких як checkbox або radio, буде повернено значення, задане в параметрі VALUE.

CHECKED - вказує, що поля типів checkbox і/або radio (див. вище параметр TYPE) активізовані.

SIZE - визначає розмір поля в символах. Наприклад, щоб визначити поле з видимою шириною в 24 символи, треба вказати SIZE="24".

MAXLENGTH - визначає максимальну кількість символів, які можна ввести в текстовому полі. Воно може бути більше, ніж кількість символів, вказаних в параметрі SIZE, в цьому випадку поле прокручуватиметься (scroll). За умовчанням кількість символів не обмежена.

SRC - задає URL-адресу картинки, використовуваної при створенні графічної кнопки, що ініціює передачу даних. Використовується спільно з параметром TYPE="image".

ALIGN - визначає спосіб вертикального вирівнювання для зображень. Використовується спільно з параметром TYPE="image". Повністю аналогічний параметру ALIGN елементу IMG. За умовчанням має значення bottom.

Завдання.

1.Створити HTML сторінку, в якій використати все з вищеперелічених форм з різними параметрами

Контрольнi запитання.

1.Що розумiють пiд формою? Назвати основнi теги, якi

використовують для складання рiзного роду форм.

2.Якi основнi параметри(атрибути) визначають вмiст форми?

3. Яке призначення параметра TYPE i змiст його значень?

4. Яке призначення параметра VALUE i змiст його значень?

5. Яким чином можна визначити максимальну кiлькiсть символiв,

якi можна ввести в текстовому полi?