Форми для одержання інформації від користувача Опис основних тегів для встановлення та використ

Тема: ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА

Мета: Опанувати технологію створення форм для інтерактивної взаємодії з користувачем.

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

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

Теги форми

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

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

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

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

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

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

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

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

Вікно для введення тексту <INPUTTYPE="TEXT'>

Вікно для введення пароля <INPUTTYPE=TASSWORD">

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

Перемикач <INPUTTYPE="RADIO">

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

Невидима зона <INPUTTYPE="FILE">

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

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

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

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

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

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

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

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

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

Багаторядкове поле створюється за допомогою тега

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

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

<TEXTAREA NAME= «Name» [ROWS= «rows»] [C01S= «columns»]>

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

Атрибут NAMEнадає вікну унікальний ідентифікатор, ROWSі COLSвизначають розмір поля перегляду у вікні броузера.

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

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

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

<SELECT NAME =«Name» [SIZE=«Size» [MULTIPLE]>

OPTIONS [SELECTED]> Options 1

OPTIONS [SELECTED]> Options 1

OPTIONS [SELECTED]> Options 1

</SELECT>

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

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

Тип введення RESETдозволяє створити на екрані кнопку, яка очищає форму і повертає всі установки до їхніх початкових значень за замовчуванням. Атрибутом VALUEвизначається текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис «Reset».

Тип SUBMITзбирає дані і надсилає Web-серверу для обробки, Кнопку SUBMITповинна мати кожна форма. Атрибут VALUEвизначає текст, який буде написаний накнопці. Якщо цей атрибут відсутній, на кнопці буде напис «SubmitQuery».

ПРИКЛАД

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

<HTML>

<НЕАD><ТITLЕ>Моя перша HTML-Сторінка</TITLE>

</HEAD>

<BODY>

<FORM ACTION=«HTTP://WWW.SERVER.COM/CGI-BIW USERINFO. CGI» METHOD=«POST»>

Ім`я: <INPUT TYPE=«TEXT» NAME=«FULINAME» SIZE=30> <BR>

E-mail:<INPUTTYPE=«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=«Biдмінити»>

<INPUT TYPE=button VALUE-«Haдіслати»>

</FORM>

</BODY>

</HTML>