Тема: ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД
КОРИСТУВАЧА
Мета:
Опанувати технологію створення форм для інтерактивної взаємодії з користувачем.
Теоретичні відомості.
Одним із способів привернення уваги до 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>
|
