Тема 6. Створення форм
6.1.Форми
Форми використовуються для організації зворотного зв’язку відвідувачів з розробниками сайтів.
Для створення форми використовується контейнер <FORM>. Тег <FORM> може мати такі атрибути:
Атрибут NAME визначає ім’я форми, використовується якщо у документі є декілька форм.
Атрибут ACTION задає URL-адресу програми, яка буде обробляти данні форми.
Щоб створити у формі елементи управління найчастіше використовується тег <INPUT>. Він має такі атрибути:
Атрибут NAME визначає унікальне ім’я поля введення, за яким надалі можна отримати дані, що введено у поле.
Атрибут SIZE визначає розмір поля у символах.
Атрибут MAXLENGTH визначає кількість символів, які користувач може ввести у поле введення. При спробі ввести більшу кількість символів браузер видає звуковий сигнал і не дає такої можливості.
Атрибут TYPE визначає тип елемента управління. Може приймати наступні значення:
TEXT - елемент управління є однорядковим текстовим полем;
RADIO – перемикач;
CHECKBOX – прапорець;
RESET – командна кнопка, при клацанні на яку усі елементи управління приймуть значення, визначенні як значення за замовчуванням;
BUTTON – командна кнопка довільного призначення;
SUBMIT - командна кнопка, при клацанні на яку викликається певна програма обробки даних форми або здійснюється перехід по визначеній URL-адресі.
Атрибут VALUE дозволяє привласнити значення атрибуту NAME, якщо даний перемикач або прапорець буде обрано.
Атрибут CHECKED дозволяє обрати / увімкнути прапорець або перемикач.
Наприклад,
<INPUT NAME=Ex1 TYPE=text SIZE=20>
<INPUT NAME=Ex2 TYPE=radio VALUE=1 CHECKED>
<INPUT NAME=Ex3 TYPE= checkbox VALUE=1 CHECKED>
У формах також можна створювати списки і списки, що розчиняються. Списки створюються за допомогою тегу <SELECT>, який має атрибут NAME - ім’я списку. Якщо у тегу визначити значення атрибуту SIZE, то у списку буде виводитися певна кількість елементів. Якщо атрибут SIZE не визначено, елемент управління є списком, що розчиняється. Елементи списку відокремлюються один від одного тегом <OPTION>.
Наприклад, можна створити список, що розчиняється для вибору одного з трьох місяців.
<SELECT NAME=MONTH>
<OPTION> Січень
<OPTION> Лютий
<OPTION> Березень
</SELECT>
За допомогою тегу <TEXTAREA> у формі можна створити багаторядкове поле, у яке відвідувач може ввести будь-яку інформацію великого розміру – відгук, особисту думку, відомості про себе тощо. Тег має атрибути NAME, ROWS – кількість рядків, COLS – кількість символів у рядку (колонок).
Щоб форма мала більш привабливий вигляд, її елементи часто розташовують всередині таблиці.
Рисунок 6.1 – Приклад форми
Приклад використання форм:
<HTML>
<HEAD>
<TITLE>
Приклад використання форм
</TITLE>
</HEAD>
<BODY>
<H2> <CENTER> Заповніть, будь-ласка, анкету:
<FORM>
<TABLE BORDER=1 ALIGN=center CELLPADDING=5 CELLSPACING=5>
<TR>
<TD> Логін: </TD> <TD COLSPAN=2>
<INPUT NAME="field1" TYPE=text SIZE=15> </TD> </TR>
<TR>
<TD> Пароль: </TD> <TD COLSPAN=2>
<INPUT NAME="field2" TYPE=text SIZE=15> </TD> </TR>
<TR> <TD> Стать: </TD> <TD>
<INPUT NAME="ST" TYPE=radio VALUE=1> жіноча</TD>
<TD>
<INPUT NAME="ST" TYPE=radio VALUE=2 CHECKED>
чоловіча </TD>
</TR>
<TR> <TD> Вік: </TD> <TD COLSPAN=2>
<SELECT NAME=VIK SIZE=3> <OPTION> до 16 років
<OPTION> від 16 до 25
<OPTION> від 25 до 40
<OPTION> більше 40 років
</SELECT> </TD> </TR>
<TR> <TD> Захоплення: </TD>
<TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=1 CHECKED> Подорожі</TD>
<TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=2 CHECKED> Спорт </TD> </TR>
<TR> <TD> </TD> <TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=3 CHECKED> Іноз. мови </TD>
<TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=4 CHECKED> Музика </TD> </TR>
<TR> <TD> </TD> <TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=5 CHECKED> Живопис </TD>
<TD>
<INPUT NAME="Z" TYPE=checkbox VALUE=6 CHECKED> Інші </TD></TR>
<TR> <TD> Додаткова <BR> інформація: </TD>
<TD COLSPAN=2>
<TEXTAREA NAME="INF" ROWS=5 COLS=25>
можна ввести будь-яку довільну інформацію </TEXTAREA> </TD> </TR>
<TR> <TD COLSPAN=3>
<INPUT NAME="otpr" TYPE=submit VALUE="Відправити"> </TD> </TR>
</FONT>
</TABLE>
</FORM>
</BODY>
</HTML>