Лабораторна робота №11, Створення форми

« Назад

Короткі теоретичні відомості до розділу: Форми

Практично всі сучасні WWW браузери дозволяють користувачеві, заповнивши спеціальну форму, виконувати деякі дії на вашому Web-сервері. Коли форма інтерпретується Web-браузером, створюється спеціальні екранні елементи GUI, такі, як поля введення, кнопки підтвердження (check-boxes), кнопки вибору альтернатив (radio-buttons) меню,що випадають, «скороллируемые” списки, кнопки,  і т.д. Коли користувач, заповнивши форму, натискає кнопку «Підтвердження» (SUBMIT – спеціальний тип кнопки, який задається при описі документа), інформація, введена користувачем у форму, посилає Web-серверу для обробки й передачі іншим програмам, що працюють під сервером, відповідно до GGI (Common Cateway Interface) інтерфейсом. За допомогою мови написання сценаріїв Javascript (Vbscript) можна перевірити правильність заповнення форми до її відправлення серверу, обробити натискання інших (відмінних від SUBMIT) кнопок і багато інші події.

Тег FORM

Усі форми починаються тегом <FORM> і закінчується тегом </FORM>. Між цими тегами й розташовуються елементи форми, такі як кнопки, поля введення і т.д. Крім  елементів форм там можна розташувати будь-які тексти й майже будь-які теги HTML.

Синтаксис тегу FORM:

Тут, як і далі, підкреслені ті позначення, які ухвалюються за замовчуванням.

Жоден з перерахованих параметрів тегу FORM не є обов’язковим. Коротко про параметри:

ACTION

Указує URL, куди слід передати інформацію, занесену у форму. Звичайно, це адреса CGIпрограми або e-mail, , оформлений через mailto: Однак досить часто тут можна зустріти й інші речі, типу javascript: 0, коли форма обробляється сценарієм. Якщо ACTION не зазначений, то інформація передається тому ж документу, у якім перебуває форма.

METHOD

При використанні методу GET (за замовчуванням), інформація з форми додається в кінець URL, який був зазначений в ACTION. Оскільки максимальна довжина URL обмежена, цей метод варто використовувати тільки для найпростіших форм. Метод POST переважніше, тому що даний метод передає всю інформацію про форму негайно після звертання до зазначеного URL. Програма одержує дані з форми в стандартний потік уведення.

NAME

Задає ім’я форми для використання в програмах-сценаріях.

ENCTYPE

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

TARGET

Також як і в тегу <А… >, указує вікно,у яке потрапить уся вихідна інформація форми.

За замовчуванням – у теж вікно, де й сама форма.

TITLE

Підказка, яка буде з’являтися, коли мишка вказує на форму (MSIE 4.0 +)

LANG

Мова - «ru» - російський, «de» - німецький і т.д.

LANGUAGE

Мова, використовувана для інтерпретації елементів сценарію для даної форми (таких як оброблювачі подій)

CLASS

Ім’я CSS – cnbk.

STYLE

Пряме включення стилю

ID

Ідентифікатор, по якому можна посилатися на форму з мови написання сценаріїв і т.д.

Про обробці подій (ONRESET  і ONSUBMIT) ми будемо докладно говорити на лекціях, присвячених Javascript.

Елементи форми: TEXTAREA

Тег <TEXTAREA> використовується для того, щоб дозволити користувачеві вводити більш одного рядка інформації (вільний текст). Область уведення починається тегом < TEXTAREA > і закінчується </ TEXTAREA >.

Текст, який буде показаний споконвічно, за замовчуванням

</ TEXTAREA >

Параметри тут також не є обов’язковими, але звичайно, все-таки, слід указати хоча б NAME, COLS і ROWS.

Параметри:

ROWS

Кількість рядків у полі

COLS

Кількість стовпців у поле

WRAP

Чи Розривати довгі рядки. OFF – не розривати. VIRTUAL – розривати на екрані, але усередині, залишати їх цілими. PHYSICAL – чесно розривати.

ACCESSKEY

Задає клавішу, яку потрібно нажати разом з Alt, щоб відразу потрапити в це поле.

ALIGN

Задає вирівнювання елемента щодо навколишнього тексту.

TABINDEX

Задає номер даного елемента в послідовності проходження елементів форми за допомогою клавіші Tab.

DISALED

Поле не одержує користувацького введення й ні на що не реагує. Служить тільки для показу споконвічної (за замовчуванням) інформації.

READONLY

Схоже на попереднє, але поле одержує фокус і в ньому може перебувати курсор.

Однак його заборонено редагувати.

Інші параметри аналогічні відповідним до параметрів тегу FORM (про оброблювачів подій ONBLUR, ONCHANGEі інших ми поговоримо пізніше).

От приклад використання тегу < TEXTAREA >. Ліворуч HTML тексту, а праворуч, те, що виходить.

Зверніть увагу, що усередині цього тегу, усі переклади рядків викликають переклади рядків і при висновку на екран.  Для деяких браузерів (наприклад, MSIE 3.0) , це вірно й для найпершого рядка. Тег </ TEXTAREA > необхідний навіть тоді, коли поле введення споконвічно порожнє.

Елементи форми: SELECT

Тег < SELECT > використовується для організації вибору з фіксованого числа заздалегідь певних значень.

За допомогою цього тегу можна представити список, список з можливістю вибрати більш, ніж один варіант і спадаюче меню. Синтаксис тегу:

Один або кілька елементів <OPTION >

</ SELECT >

Як звичайно, параметри не обов’язкові. Майже всі параметри мають той же зміст, що й  раніше. Ми розглянемо тільки нові:

SIZE

Кількість елементів списку видимих на екрані. Якщо цей параметр більше 1, то маємо справа зі списком, інакше – зі спадаючим меню.

MULTIPLE

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

SINGLE

Елемент <OPTION>, згаданий при описі синтаксису, задає один елемент списку. Його формат:

Текст, що коштує між < OPTION… > і </ OPTION >, буде показаний користувачеві як значення даного елемента списку.

Якщо зазначений параметр SELECTED, то цей елемент буде споконвічно «обраний». Інші параметри використовуються вкрай рідко. Параметр VALUE задає значення для даного поля «за замовчуванням». Це має сенс,якщо Ви збираєтесь міняти поля за допомогою програм сценаріїв. Усі наші параметри вже були описані раніше.

Приклади різних елементів SELECT.

Елементи форми: INPUT

Тег < INPUT > використовується для дуже багатьох речей в HTML. Що конкретно він означає, визначається його параметром TYPE.

Визначає, що собою представляє даний елемент. Можливі наступні значення:

BUTTON – кнопка. Має сенс тільки якщо Ви обробляєте її натискання із програми сценарію. Без програм сценарію – річ пошук.
CHECKBOX – елемент, який можна включити й виключити.	Checkbox
IMAGE – це не просте зображення. Воно працює як кнопка SUBMIT, тобто, якщо навести на зображення миша і нажати кнопку, інформація форми негайно передається за адресою зазначеній в ACTION. При цьому передаються й координати того місця, де була миша.	Він десь тут!
PASSWORD – поле введення пароля, символи, що вводяться, не відображаються	Пароль
RADIO – радіо-кнопка. Їх звичайно поєднують у групи (група – кілька кнопок з тим самим NAME). У включеному стані зажди перебуває тільки одна із кнопок групи.	Intel 80386 Intel 80486
RESET – кнопка скидання. Очищає форму.	Сброс
SUBMIT – кнопка, при натисканні якої інформація з форми передається за адресою, зазначеному в ACTION для обробки.	Готово
TEXT – простої поля для введення одного рядка тексту.
FILE – дає можливість користувачеві вибрати файл, що перебуває на його локальному диску. Надалі цей файл можна переслати на сервер. Ця можливість з’явилася в NN з версії 3, а в MSIE – з версії 4.0.

Задає розмір видимого поля там, де це має сенс. Наприклад, для полів типу TEXT, PASSWORD, FILE і т.п.

MAXLENGTH

Задає максимальний розмір поля там, де це, знову ж, має сенс. Визначає кількість символів, яку користувачі можуть увести в поле введення. При перевищенні кількості припустимих символів браузер реагує на спробу введення нового символу звуковим сигналом і не дає його ввести. Не плутати з атрибутом SIZE, то в полі здійснюється скролінг. За замовчуванням значення  MAXLENGTH дорівнює нескінченності.

SRC

Для типу IMAGE задає URL файлу зображення.

BORDER

Для типу IMAGE задає розмір бордюру навколо зображення.

CHECKED

Для типів CHECKBOX і RADIO указує, що даний елемент споконвічно «включений».

VALUE

Значення елемента. Звичайно це текст на кнопці або споконвічний текст у поле введення.

ALIGN

Для типу IMAGE повністю аналогічно ALIGN у тегу <IMG>

Відправлення файлів на сервер

Форми можна також використовувати для відправлення файлів на сервер. Чудес, однак, не буває, і оскільки дана можливість вимагає підтримки одержання файлів Web – сервером, те, відповідно, необхідно, щоб сервер підтримував одержання файлів! Крім того слід пам’ятати, що й з клієнтськими програмами не все в порядку. Ця можливість з’явилася в Netscape 3.0 + і в MSIE 4.0 +!

Усе,що потрібно від форми, це:

А. Указати ENCTYPE = “multipart / form-data” у тегу FORM

Б. Указати METHOD = “POST” у тегу FORM

С. Використовувати <INPUT TYPE = “FILE”… > для введення імені файлу.

Наприклад:

Елементи діалогу (кнопки, області для введення тексту).

 

Завдання до лабораторної роботи №11 

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

Варіант 001

Створити форму для ведення інформації про людині. Повинна вводиться наступна інформація:

Прізвище	Просте текстове введення
Ім’я	Просте текстове введення
По батькові	Просте текстове введення
Вік	Вибір з варіантів «до 7», «від 7 до 17», «від 17 до 33», «від 33 до 65» і «65 і старше»
Підлога	Повинна бути «радіо-кнопка»
Чи Пристойна людина	Повинен бути «чекббокс»

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 002

Створити форму для введення інформації про людині. Повинна вводитися наступна інформація:

Прізвище	Просте текстове введення
Рік народження	Уводиться текстом. Заборонити введення більш ніж  чотирьох символів.
Підлоги	Повинна бути «радіо-кнопка»
Громадянство	Вибір зі списку держав

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 003

Створити форму для введення  адреси. Повинна вводитися наступна інформація: 

Країна	Вибір зі списку. За замовчуванням - Україна
Поштовий індекс	Просте текстове введення, не більш шести символів
Місто	Просте текстове введення
Вулиця номер будинку	Просте текстове введення
Вказівка на те, що адреса службова / домашній	Повинна бути «радіо-кнопка»

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 004

Створити форму для введення замовлення на комп’ютер. Повинна вводитися наступна інформація:

Процесор	Вибір зі списку. За замовчуванням Intel Pentium II
Пам'ять	Просте текстове введення
Необхідний мережевий адаптер	Повинен бути «чек-бокс»
Необхідний модем	Повинен бути «чек-бокс»
Додаткові вимоги	Багатострокове поле введення

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 005 

Створити форму для замовлення товарів. Форма повинна пропонувати замовити відразу кілька товарів. Для кожного слід указувати кількість. Один раз слід указати адреса доставки. Повинна вводитися наступна інформація: 

Найменування товару	Вибір зі списку. Зробіть кілька однакових списків, щоб можна було замовити відразу кілька різних товарі
Пам'ять	Уводиться текстом. Потрібно зробити окреме поле для введення кількості, напроти кожного списку товарів.
Адреса доставки	Текст

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 006

Створити форму для запиту пароля. Повинна вводитися наступна інформація: 

Ім’я користувача	Уводиться текстом
Ресурс	Вибір зі списку. Передбачите кілька ресурсів. Наприклад, «Перегляд бази даних», «Редагування бази даних» і т.д. за замовчуванням нехай буде «Повний доступ»
Пароль	Стандартне поле для введення пароля

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 007

Створити форму для замовлення на ремонт комп’ютера. Повинна вводитися наступна інформація:

Ім’я користувача	Уводиться текстом
Адреса	Уводиться текстом
Процесор	Вибір зі списку. За замовчуванням Intel Pentium II
Характер несправності	Багатострокове поле введення

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 008

Створити форму для замовлення на ремонт автомобіля. Повинна вводиться наступна інформація:

Ім’я власника	Уводиться текстом
Адреса	Уводиться текстом
Модель	Вибір зі списку. За замовчуванням «ВАЗ 2101»
Характер несправності	Багатострокове поле введення

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 009

Створити форму для замовлення автомобіля. Повинна вводиться наступна інформація:

Ім’я власника	Уводиться текстом
Адреса	Уводиться текстом
Модель	Вибір зі списку. Можливо вибрати відразу кілька моделей
Колір	Вибір зі списку. Можливо вибрати відразу кілька квітів
Мінімальна ціна	Вибір зі списку
Максимальна ціна	Вибір зі списку

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 010

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

Тема	Вибір зі списку. Можливо вибрати відразу кілька тем
Автор	Уводиться текстом
Назва	Уводиться текстом
Мінімальний рік видання	Вибір зі списку
Максимальний рік видання	Вибір зі списку

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 011

Створити форму для гостьової книги. Форма може бути такою, як Вам подобається, але обов’язково включати ім’я, URL і e-mail гостюючи й багаторядкове поле введення тексту. У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 012

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

Запит	Уводиться текстом
Система пошуку	Вибір зі списку
Кількість записів, що вертаються	Вибір зі списку. За замовчуванням, не обмежене

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 013

Створити форму для реєстрації нового користувача в системі. Повинна вводиться наступна інформація:

Ім’я	Текст
e-mail	Текст
URL	Текст
Пароль	Поле введення пароля
Підтвердження пароля	Поле введення пароля

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 014

Створити форму для введення інформації про те, які предмети прагнув би вивчати студент. Предмети повинні бути перераховані по одному на рядкові й перед назвою кожного повинен стояти «check-box». Початково жоден предмет не повинен бути обраний. Крім того форма повинна містити поле для введення імені й кнопку «Очистити форму» (зрозуміло, вона повинна правильно працювати)

Варіант 015

Створити форму для введення інформаціїз географічної карти. Уведення повинне здійснюватися простим натисканням мишею на обрану ділянку карти. 

Варіант 016

Створити форму. У якій є дві незалежні серії радіо-кнопок. Наприклад, для введення улюбленого телеканалу. Повинна вводиться наступна інформація:

ПІБ	Просте текстове введення
Канал	Серія радіо-кнопок
Передача	Серія радіо-кнопок. Наприклад, «Новини», «Серіали», «Мультфільми» і т.д.

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 017

Створити форму, у який є як список типу «спадаюче меню», так і простий відкритий список. В останньому повинен бути передбачений одночасний вибір декількох елементів. Заповніть списки, значеннями за своїм розсудом.

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 018

Створити форму для введення інформації про студента. Повинна вводитися наступна інформація:

Прізвище	Просте текстове введення
Ім’я	Просте текстове введення
По батькові	Просте текстове введення
Підлога	Повинна бути серія «радіо-кнопок»
Курс	Вибір зі списку

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 019

Створити форму для введення відомості нарахування зарплати. Відомість розрахована на бригаду з 10 людей. Для кожної людини повинна вводитися наступна інформація:

ПІБ	Просте текстове введення
Оклад	Просте текстове введення. Зробіть заданий розмір рядка, що вводиться, розумним числом
Чи основне місце роботи	Чек-бокс
Відділ	Серія радіо-кнопок

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 020

Створити форму для введення бухгалтерської проводки. Повинна вводитися наступна інформація:

Рахунок-дебет	Вибір зі спадаючого меню
Рахунок-кредит	Вибір зі спадаючого меню
Сума	Просте текстове введення. Зробіть фіксований розмір рядка, що вводиться, розумним числом.
Особистий код бухгалтера	Вибір зі спадаючого меню
Пароль	Поле для введення паролів

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 021

Створити форму для висновку бібліографічної інформації. Форма повинна містити опис якоїсь книги (автор, назва. Видавництво, рік і т.д) і дві кнопки «Наступна книга» і «Попередня книга».

Варіант 022

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

ПІБ	Просте текстове введення
Адреса	Просте текстове введення.
Кількість кімнат у клієнта	Спадаюче меню
Бажані міста	Список з можливістю вибору декількох варіантів
Бажана кількість кімнат	Спадаюче меню
Поверховість	Серія радіо-кнопок. Наприклад, «Будь-яка», «Крім першого», «Крім останнього», «Крім першого й останнього», і т.д.
Додаткові умови	Багато порядкове текстове поле

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 023

Створити форму для введення інформації про бажаний для клієнта варіант внутриміського обміну квартири. Повинна вводитися наступна інформація:

ПІБ	Просте текстове введення
Адреса	Просте текстове введення.
Кількість кімнат у клієнта	Спадаюче меню
Бажані райони	Список з можливістю вибору декількох варіантів
Бажана кількість кімнат	Спадаюче меню
Поверховість	Список з можливістю вибору декількох варіантів
Додаткові умови	Багато порядкове текстове поле

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 024

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

Ім’я	Текст
e-mail	Текст
URL	Текст
Пароль	Поле введення пароля
Підтвердження пароля	Поле введення пароля

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати). 

Варіант 025

Створити форму для голосування відразу на кілька посад. Списки кандидатів на кожну посаду повинні бути представлена спадаючим меню. Напроти кожного списку повинна бути написана посада на яку претендують кандидати. У списках кандидатів повинна бути позиція «Проти всіх».ця позиція й повинна бути обрана за замовчуванням. У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 026

Створити форму для пошуку підходящого будинку в базі даних ріелтерської фірми. Повинна водитися наступна інформація:

Площа	Уводиться текстом
Поверховість	Спадаюче меню
Район	Список з можливістю вибору декількох варіантів
Наявність комунікацій	Серія чек-боксів. Наприклад «Водопровід», «Телефон» і т.д.
Додаткові вимоги	Багато строкове поле введення

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 027

Створити форму для пошуку підходящих матеріалів у бібліотеці. Повинна вводитися наступна інформація:

Ключові слова	Уводиться текстом
Рік публікації	Вибір діапазонів зі спадаючого меню
Характер публікації	Список з можливістю вибору декількох варіантів. Наприклад, «Стаття в журналі», «Дисертація», «Монографія»
Мова	Список з можливістю вибору декількох варіантів.
Доставка	Серія радіо-кнопок. Наприклад: «Підняти в читальний зал», «доставити на абонемент»

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 028

Форма для введення інформації про те, які журнали читає клієнт. Повинні бути перераховані назви журналів. Навпроти кожного, повинен бути чек-бокс і серія із двох радіо-кнопок – «Регулярно», «Час від часу».

У формі повинна бути кнопка «Очистити форму» (зрозуміло, вона повинна правильно працювати).

Варіант 029

Створити форму для замовлення на відновлення комп’ютера. Наступна інформація повинна вводитися, як для наявного комп’ютера, так і для бажаного (переобладнаного).

Форма повинна бути побудована у два стовпчики.

Процесор	Вибір зі списку
Пам'ять	Просте текстове введення
Мережевий адаптер	Вибір зі спадаючого меню
Додаткові вимоги	Багатострокове поле введення