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

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

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

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

Одним із способів привернення уваги до $Web-сторінок є введення до них елементів інтерактивності, яке передбачає обмін інформацією між користувачем і сервером. Одним із засобів, за допомогою яких на сервер подається інформація про запити користувача, є HTML-форми і сценарії CommonGate$weyInterfase (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>

Post Comment