- •2.1. Загальний огляд технологій створення інтерактивних
- •5.1. Особливості методичної системи вивчення основ
- •1 Розділ
- •1.1. Основні принципи побудови та функціонування мережі Internet
- •1.2. Форматування тексту мовою html
- •1.3. Використання гіперпосилань
- •1.5. Списки і таблиці у html-документах
- •1.6. Використання фреймів
- •1.7. Каскадні таблиці стилів (css)
- •1.8. Введення даних за допомогою форм
- •1.9. Розробка Web-сайтів
- •2 Розділ
- •2.1. Загальний огляд технологій створення інтерактивних Web-документів
- •2.2. Використання скриптів JavaScript
- •2.3. Використання рнр і MySql
- •Додатки Створення шкільної Intranet
1.8. Введення даних за допомогою форм
У специфікацію HTML введені спеціальні дескриптори, призначені для створення форм, що заповняються користувачем.
На відміну від більшості HTML-документів, в яких дескриптори і текст
використовуються для відображення інформації, форми призначені як для відображення, так і для збору інформації. Форми складаються з декількох полів введення, в які користувач може вводити дані сам, або вибирати один із запропонованих варіантів. Броузер забезпечує пересилання введених користувачем даних на сервер, де вони обробляються спеціальними програмами (сценаріями). Сценарій є короткою програмою, написаною для конкретної форми, може виконувати різноманітні функції. Можна обробляти інформацію, введену у форму, і на комп'ютері користувача, використовуючи при цьому сценарії мовою JavaScript, а також відправляти дані з форми на поштову скриньку e-mail. Форми і сценарії функціонують у тісному взаємозв'язку. Форма є зовнішнім елементом процесу, тією частиною, яка забезпечує взаємодію з користувачем. Сценарій є внутрішнім елементом процесу, що опрацьовує введені дані. (Сценарії розглядатимуться в розділі ІІ.)
HTML-форми дозволяють отримувати інформацію від відвідувачів Web-сторінки. Форми можна використовувати для запиту будь-яких видів текстових даних, для отримання відповіді на питання, для отримання інформації про вибрану користувачем опцію. На рис. 1.25 подано результати використання практично всіх можливостей, які надаються розробникам засобами опису форм у HTML.
Рис. 1.25
Існує три типи дескрипторів для створення форм: <TEXTAREA>, <SELECT>, <INPUT>. У контейнері <FORM><FORM> можна поміщати будь-яку кількість вказаних дескрипторів. <TEXTAREA> визначає поле, в яке можна вводити рядки тексту. <SELECT> надає користувачеві можливість вибору значень із списку або меню. <INPUT> — надає можливість використовувати інші типи введення даних: окремі рядки тексту, перемикачі, кнопки передавання запиту і відмови від введення.
Дескриптор <FORM>
Дескриптор <FORM> повинен бути на початку кожної форми. У цьому дескрипторі вказується програма-сценарій сервера і спосіб пересилки даних. Це здійснюється за допомогою атрибутів:
ACTION — вказує URL програми-сценарію, яка опрацьовує дані з форми, або адресу електоронної пошти, на яку будуть відправлені введені у форму дані.
METОD — вказує, як слід відправляти інформацію сценарію. Може приймати значення POST і GET. (Докладніше методи передавання POST і GET буде розглянуто у розділі II.)
Приклад дескрипторів <FORM>:
<FОRM METОD="PОST" ACTION="cgi-bin/script.pl">
<FОRM METОD="PОST" ACTION="mailto:kito@npu.kiev.ua">
Дескриптор <TEXTAREA>
За допомогою цього дескриптора можна створити поле введення великої кількості рядків тексту. За замовчуванням дескриптор <TEXTAREA> формує чисте поле, яке складається з чотирьох рядків з 40 символами у кожному. За допомогою атрибутів ROWS і COLS можна вказати розміри поля введення. Можна вказати і деякий текст за замовчуванням, вводячи його між дескрипторами <TEXTAREA> і </TEXTAREA>. Обов'язковим атрибутом є атрибут NAME, у якому вказується ім'я поля. У наступному коді наведено приклад використання дескриптора <TAXTAREA>.
Лістинг 1.28
<HTML>
<HEAD>
<TITLE> TextArea.htm</TITLE>
</HEAD>
<BОDY>
<FОRM>
<TEXTAREA NAME="comments" R0WS=4 C0LS=40>Teкст за замовчуванням
Другий рядок
</TEXTAREA>
</FORM>
</BОDY>
</HTML>
На рис. 1.26 подано відображення в броузері сторінки з таким кодом.
Рис. 1.26
Дескриптор <SELECT>
За допомогою елемента введення, який задається дескриптором <SELECT>, користувач може вибрати одне із запропонованих значень. Броузер відображає на екрані поле типу <SELECT> як простий список і список, що розкривається, які часто використовуються у діалогових вікнах системи Windows.
У дескрипторі <SELECT>, крім атрибута NAME, можуть бути вказані ще два атрибути:
<SELECT NАМЕ="ім'я_поля" SIZE=n MULTIPLE>
</SELECT>
Значення ім'я_поля визначає ім'я, яке присвоюється даному полю. Атрибут SIZE встановлює число рядків списку, які відображаються одночасно. Атрибут MULTIPLE встановлює режим вибору декількох значень.
Між дескрипторами <SELECT> і </SELECT> вказуються значення, які може вибирати користувач. Вони перелічуються у дескрипторі <0PTI0N>, всередині якого неможна використовувати інші елементи HTML.
Дескриптор <ОPTIОN> має два атрибути: VALUE і SELECTED. Атрибут VALUE — значення, що присвоюється вибраному елементу списку і відсилається серверу. Це значення не обов'язково повинно збігатися з текстом, який показується користувачеві; користувачеві може бути показано розширений опис поля, що вибирається, у той час, як сценарію беде передано деяке коротке значення, яке відповідає цьому полю. За допомогою атрибута SELECTED можна виділити певний елемент списку.
У наступному лістингу подано код HTML-списку, який складається з чотирьох елементів. Зовнішній вигляд цієї форми подано на рис. 1.27.
Лістинг 1.29
<HTML>
<HEAD>
<ТITLЕ>Список</ТITLЕ>
</HEAD>
<BODY>
Виберіть тип з'єднання:
<FORM>
<SELECT MULTIPLE NAME="network">
<OPTION SELECTED VALUE="ethernet">Ethernet
<OPTION VALUE="ISDN">ISDN
<OPTION VALUE="DialUp-33600">DialUp - 33,6K
<OPTION VALUE="DialUp-V.90">DialUp - 56K
</SELECTED>
</FORM>
</BODY>
</HTML>
Рис. 1.27
Дескриптор <INPUT>
За допомогою дескриптора <INPUT> створюються прості текстові поля введення, поля паролів, перемикачі, кнопки подачі запиту і відмови від нього. Дескриптор <INPUT> може записуватись із такими атрибутами:
NAME — вказує ім'я поля. Він є обов'язковим для всіх типів введення крім SUBMIT і RESET.
SIZE — встановлює розмір у символах поля введення тексту чи пароля.
MAXLENGTH — встановлює максимальну кількість символів, які можуть бути введені у поле введення тексту чи пароля.
VALUE — встановлює текст за замовчуванням для поля введення тексту чи пароля. Для прапорця чи перемикача він вказує значення, яке повертається серверу у випадку вибору прапорця чи перемикача. Для кнопок SUBMIT RESET визначає розміщений на кнопці текст.
CHEKED — включає прапорець або перемикач.
TYPE — встановлює необхідний тип поля введення.
Далі описані допустимі значення атрибута TYPE дескриптора <INPUT>.
TEXT
Використовуючи дескриптор <INPUT> разом з атрибутом TYPE=TEXT, можна створювати поле введення рядка тексту.
PASSWORD
Модифіковане текстове поле; при введенні тексту замість символів відображаються зірочки.
CHECKBOX
Відображає простий прапорець, який можна встановити або залишити порожнім. Прапорці використовуються у випадках, коли в списку можна одночасно вибрати декілька значень.
RADIO
Перемикач (так звана радіокнопка) є складнішою версією прапорця. Він пропонує вибір одного з елементів. Присвоюючи однакові значення атрибуту NAME різних перемикачів, їх можна об'єднати в групу.
RESET
Дескриптор <INPUT> з атрибутом TYPE=RESET задає кнопку, з допомогою якої користувач може відмінити всю введену в форму інформацію, встановивши початкові значення даних. Атрибут VALUE дескриптора <INPUT> в цьому випадку задає текст, що відображається на кнопці.
SUBMIT
Дескриптор <INPUT> з атрибутом TYPE=SUBMIT задає кнопку, з допомогою якої користувач може відправити дані на сервер.
У наступному коді подано приклад використання розглянутих атрибутів. Відображення сторінки з таким кодом подано на рис. 1.28.
Лістинг 1.30
<HTML>
<HEAD>
<ТІTLЕ>Приклад використання дескриптора <INPUT>
з атрибутами різних типів</TITLE>
</HEAD>
<BODY>
<FORM NAME="forma1" METHOD="post" ACTION="mailto:kito@npu.kiev.ua">
<!--відправляємо дані з форми на E-mail-->
Номер телефону: <INPUT TYPE="TEXT" Name="Phone" SIZE="15"
MAXLENGTH="12"> - використано атрибут TYPE=TEXT
<P>
Введіть пароль <INPUT TYPE="PASSWORD" NAME="SecretCode" SIZE="30"
MAXLENGTH="30"> - використано атрибут TYPE=PASSWORD
<P>
Рід занять:<BR>
<INPUT TYPE="CHECKBOX" NAME="CheckBox1"
VALUE="checkbox_value1"> Студент
<INPUT TYPE ="CHECKB0X" NAME="CheckBox2"
VALUE="chekbоx_value2" CHECKED> Аспірант
- використано атрибут TYPE=CHECKBOX
<P>
Стать:
<INPUT TYPE="RADIO" NAME="Radio1"
VALUE="Radio_value1" CHECKED> Чол.
<INPUT TYPE="RADIO" NAME="Radio2"
VALUE=':Radio_value2" >Жін.
- використано атрибут TYPE=RADIO
<P>
<INPUT TYPE="RESET" VALUE ="Відмінити">
використано атрибут TYPE=RESET
<BR>
<INPUT TYPE="SUBMIT" VALUE ="Відіслати дані">
використано атрибут TYPE=SUBMIT
</FORM>
</BODY>
</HTML>
Рис. 1.28
Контрольні запитання
1. Для чого використовуються HTML-форми?
2. Як створюються HTML-форми?
3. Як створюються елементи управління у формах?
Практичні завдання
1. Створити форму для реєстрації абонентів телефонної мережі (використати такі елементи управління: список, поле введення, прапорець, перемикач, кнопку).
2. Створити форму для відправлення на сервер інформації про студента групи.
3. Вирівняти елементи управління у формах ?а допомогою таблиць.