Лекція 13. ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА

Лекція 13. ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА

Одним із способів привернення уваги до Web-сторінок є введення до них елементів інтерактивності, які передбачають обмін інформацією між користувачем і сервером. Одним із засобів, за допомогою яких на сервер подається інформація користувача, є HTML-форми і сценарії Common Gatewey Interfase (CGI) – спільний інтерфейс шлюзів. Форми в Internet Explorer нагадують бланки і складаються з полів для введення текстової інформації, списків вибору варіантів і можливих опцій. За допомогою форм і завдяки механізму CGI-сценаріїв автори Web-сторінок можуть задавати певні питання користувачу і одержувати від нього відповіді. Форми можуть бути діловими або неформальними, залежно від потреб.

Теги форми

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

<TEXTAREA>…

</TEXTAREA>                   Текстове поле введення

<SELECT>…</SELECT>         Меню здійснення вибору

<INPUT>…</INPUT>              Кнопки команд

Теги <TEXTAREA>, <SELECT>, <INPUT> повинні бути визначені всередині пари тегів <FORM>….</FORM>.

Атрибути тега <FORM>

ACTION        Визначає адресу URL, за якою надсилається введена інформація

METHOD=GET| POST Визначає, як інформація, що зібрана формою, надсилається за URL-адресою. Визначається CGI-сценарієм

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

Типи полів тега <INPUT>

Тип поля                              Вид тега

Вікно для

введення тексту                    <INPUT TYPE=”TEXT”>

Вікно для

введення пароля                            <INPUT TYPE=”PASSWORD”>

Прапорець                           <INPUT TYPE=”CHECKBOX”>

Перемикач                           <INPUT TYPE=”RADIO”>

Файл                                     <INPUT TYPE=”FILE”>

Невидима зона                     <INPUT TYPE=”HIDDEN”>

Текстове вікно                     <TEXTAREA>…</TEXTAREA>

Меню                                    <SELECT>…<OPTIONS>…</SELECT>

Типи TEXT і PASSWORD схожі і створюють текстове поле для введення з одним рядком. Тип PASSWORD відображає текст, що вводиться у вигляді зірочок *.

Якщо у тега <INPUT> значенням атрибута TYPE є TEXT, повинно бути визначене значення NAME, а також SIZE, MAXLENGTH, VALUE.

Значення атрибута TEXT

SIZE                        Визначає ширину поля введення тексту

MAXLENGTH       Визначає максимальну кількість символів, які користувач може ввести у цьому полі

VALUE                   Визначає задане за замовчуванням значення поля (або не використовуються взагалі)

Багаторядкові текстові поля введення

Багаторядкове поле створюється за допомогою тегу <TEXTAREA>…

</TEXTAREA>, який задає розміри тексОтового вікна.

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

<TEXTAREA NAME=”Name” [ROWS=”rows”] [COLS=”columns”]>

Пояснювальний текст до використання вікна

</TEXTAREA>

Атрибут NAME надає полю унікальний ідентифікатор, ROWS і COLS

визначають розмір поля перегляду у вікні браузера.

Створення меню у формах

Меню у формах створюється за допомогою використання конвеєрного тега <SELECT>…<OPTIONS>…</SELECT>

Синтаксис тега такий:

<SELECT NAME =”Name” [SIZE=”Size”] [MULTIPLE]>

<OPTIONS [SELECTED]> Option 1

<OPTIONS [SELECTED]> Option 1

<OPTIONS [SELECTED]> Option 1

</SELECT>

Атрибут SIZE визначає число пунктів меню, які будуть показані на сторінці браузера. При розміщенні більш ніж однієї опції вибору необхідно включити атрибут MULTIPLE. Кожний пункт меню визначається тегом OPTIONS. Якщо один з пунктів повинен бути обраний за замовчуванням, для нього слід вказати атрибут SELECTED.

Типи введення

Тип введення RESET дозволяє створити на екрані кнопку, яка очищає форму і повертає всі установки до їх початкових значень за замовчуванням.

Атрибутом VALUE визначається текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “Reset”.

Тип SUBMIT збирає дані і надсилає Web-серверу для обробки. Кнопку

SUBMIT повинна мати кожна форма. Атрибут VALUE визначає текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “Submit”.

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD><TITLE>Моя перша HTML-сторінка</TITLE></HEAD>

<BODY>

<FORM   ACTION=”HTTP://WWW.SERVER.COM/CGI-BIN/USERINFO. CGI” METHOD=”POST”>

Им’я:<INPUT TYPE=”TEXT” NAME=”FULINAME” SIZE=30> <BR>

E-mail: <INPUT TYPE=”TEXT” NAME=”EMAIL” SIZE=30> <BR>

<P> <HR></P>

Зазначте тип операційної системи, з якою Ви постійно працюєте<BR>

<INPUT   TYPE=”CHECKBOX”  NAME=”Windows”VALUE  =   “YES” CHEKED>Windows or DOS <BR>

<INPUT     TYPE=”CHECKBOX”     NAME=”MAC”VALUE=     “YES” CHEKED> MAC <BR>

<INPUT     TYPE=”CHECKBOX”     NAME=”UNIX”VALUE=    “YES” CHEKED>UNIX <BR>

<TEXTAREA NAME=”COMMENTS” COLS=80>

Повідомте Вашу думку щодо інформаційного наповнення сайту

</TEXTAREA>

<INPUT TYPE=button VALUE=”Відмінити”>

<INPUT TYPE=button VALUE=”Надіслати”>

</FORM></BODY></HTML>

Відображення  файла програмою-броузером: