Лекція № 8
Тема: Форми в HTML-документах. Елементи форм.
Теги FORM та INPUT.
План
Загальні положення
Елементи форм
Тег FORM
Тег INPUT
Загальні положення
Форми призначені для відправки інформації CGI-додатку, тобто нашому сценарію. Розглянемо просту форму введення імені:
<form action="http://localhost/l.php" method="GET">
Ім'я: <input type=text name=username><br>
<input type=submit value="Відправити"> </form>

Дана форма містить всього два елементи — поле для введення імені і кнопку з написом «Передати». Що ж відбувається, коли користувач вводить ім'я і натискає на кнопку «Передати»? Браузер передасть сценарію l.php параметр user_name. Як значення параметра буде введене користувачем ім'я. Оскільки використовується метод GET, то в рядку адреси ви побачите:
http://localhost/l.php?username=Denis
Елементи форм
Форма в HTML-документі реалізується тегом-контейнером FORM, в якому задаються всі елементи, що управляють, — поля введення, кнопки і т.д. Якщо елементи, що управляють, вказані поза вмістом тега FORM, то вони не створюють форму, а використовуються для побудови призначеного для користувача інтерфейсу на WEB-сторінці, тобто для того, що привнесло в неї різних кнопок, прапорців, полів введення. Обробка таких елементів проводиться індивідуально в рамках самого HTML-документа за допомогою включених в нього скриптів. А можуть взагалі ніяк не оброблятися. Наприклад, елемент (тег) ТЕХТАRЕА, що управляє, часто використовується для створення вікна із смугою прокрутки усередині документа для виведення великого тексту, який грає другорядну роль. Зазвичай так відображаються тексти ліцензійних угод, тексти великих коментарів або правила користування даним WEB-ресурсом.
Імена елементам форми привласнюються через їх атрибут NAME.
Кожен елемент форми має початкове, використовуване за умовчанням, і кінцеве значення, які є символьними рядками. Початкові значення елементів не міняються, завдяки чому може здійснюватися скидання значень, вказаних користувачем. Результатом цієї дії буде установка всіх елементів форми, що управляють, в своїх первинних використовуваних за умовчанням значеннях.
У HTML 4.01 визначені наступні типи елементів, що управляють:
- Кнопки — задаються за допомогою елементів BUTTON і INPUT. Розрізняють:
кнопки відправки — при натисненні на них здійснюють відправку форми серверу;
кнопки скидання — при їх натисненні встановлюють керівники елементи в первинні значення;
інші кнопки — кнопки, для яких не вказана дія виконуване за умовчанням при їх натисненні.
- Залежні перемикачі (перемикачі із залежною фіксацією) —задаются елементом INPUT і є перемикачами «вкл/викл». Якщо декілька залежних перемикачів мають однакові імена, то вони є взаимовиключними. Це означає, що якщо одна з них ставиться в положення «вкл», то всі інші автоматично — в положення «викл». Саме це і є перевагою їх використання.
- Незалежні перемикачі (перемикачі з незалежною фіксацією) — задаються елементом INPUT і є перемикачами «Вкл/викл», але на відміну від залежних, незалежні перемикачі можуть приймати і змінювати своє значення незалежно від решти перемикачів. Навіть якщо останні мають таке ж ім'я.
- Меню — реалізується за допомогою елементів SELECT, OPTGROUP і OPTION. Меню надають користувачеві список можливих варіантів вибору.
- Введення тексту — реалізується елементами INPUT, якщо вводиться один рядок, і елементами TEXTAREA — якщо декілька рядків. В обох випадках введений текст стає поточним значенням елементу, що управляє.
- Вибір файлів — дозволяє разом з формою відправляти вибрані файли, реалізується HTML-елементом INPUT.
- Приховані елементи, що управляють, — створюються елементом INPUT, що управляє.
Як бачите, дуже багато елементів задаються за допомогою одного і того ж тега INPUT. Цей тег дійсно є універсальним.
Тег FORM - контейнер форм
Як вже мовилося, форма в HTML-документі реалізується тегом-контейнером FORM. Цей тег своїми атрибутами указує адреса сценарію, якому буде послана форма, спосіб пересилки і характеристику даних, що містяться у формі. Початковий і кінцевий теги FORM задають межі форми, тому їх вказівка є обов'язковою. Проте атрибути тега FORM детально розглянути все-таки слідує:
- action — єдиний обов'язковий атрибут. У якісного значення указується URL-адреса запрошуваної CGI-програми, яка оброблятиме дані, що містяться у формі. Допустимо використовувати запис MAILTO:URL, завдяки якому форма буде послана по електронній пошті. Якщо атрибут ACTION все-таки не вказаний, то вміст форми буде відправлений на URL-адресу, з якої завантажувалася дана WEB-сторінка.
- method — визначає метод НТТР, використовуваний для пересилки даних форми від браузера до сервера. Атрибут METHOD може приймати два значення: get або post.
- enctype — необов'язковий атрибут. Указує тип вмісту форми, використовуваний для визначення формату кодування при її пересилці
Тег INPUT і способи його використання
Елемент INPUT є найбільш споживаним тегом, оскільки з його допомогою реалізуються основні функції форми. Він дозволяє створювати усередині форми поля введення рядка тексту, імені файлу, пароля і ін.
Звернете увагу на особливість INPUT — у нього немає кінцевого тега. Атрибути і особливості використання INPUT залежать від способу його використання. Ці способи ми зараз і розглянемо.
Однорядкові поля введення
Найчастіше використовуються поля введення — адже навіть кнопка є полем введення. Ми вже знайомі з полем введення текстової інформації, тому огляд полів введення почнемо саме з текстового поля. Формат тега INPUT для створення поля введення текстового рядка:
<input type=text name=имя_параметра
[value=3Ha4eHMe] [size=pa3Mep] [maxlen=длина] >
Даний тег створює поле введення з максимально допустимою довжиною тексту maxlen і розміром в size знакомісць. Якщо заданий атрибут value, то в полі спочатку відображатиметься вказаний рядок. У квадратних дужках помічені необов'язкові атрибути..
Поле введення пароля
Можливо, ви створюєте який-небудь серйозний проект, що вимагає авторизації, тобто перевірки імені користувача і пароля. Звичайно, ім'я користувача можна ввести за допомогою звичайного текстового поля.
А ось як бути з паролем? Адже він не повинен відображатися на екрані? В цьому випадку вам допоможе поле введення пароля:
<input type=password name=имя_параметра [vа1ие=значение] [size=pa3Mep] [maxlen=длина]>
Принцип роботи даного тега такий самий, як і текстового. Різниця полягає в тому, що інформація, що вводиться, в полі не відображається, а замінюється «зірочками».
Слід мати на увазі, що не рекомендується встановлювати значення vaIue (значення за умовчанням) з міркувань безпеки. Так, у вікні браузера дане значення не відображається, та варто проглянути початковий HTML-код, пароль буде видний «неозброєним оком».
Приховане текстове поле
Для передачі службовій інформації (про яку користувач навіть не повинен підозрювати) використовуються приховані поля. За допомогою таких полів, наприклад, можуть передаватися параметри настройки.
<input type=hidden name=имя value=значение >
Такі поля передаються серверу, але на Web-сторінці не відображаються.
Незалежні перемикачі
Дуже часто користувачеві, що заповнює форму у себе в браузері, необхідно дати можливість вказати свої настройки за допомогою вибору певних значень. При цьому приводяться самі ці значення, а поряд з ними поміщається невелике квадратне поле, в якому можна встановити, або прибрати галочку. При цьому значення, відповідно, буде або вибрано, або немає.
Реалізувати це можна знову ж таки за допомогою тега INPUT. Для цього тільки необхідно як значення атрибуту type вказати checkbox:
<input type=checkbox пате=имя уа1ие=значение [checked]>
Якщо перемикач був включений на момент натиснення кнопки відправки даних, то сценарію буде переданий параметр iмя=значення. Якщо ж прапорець вимкнений, то сценарію взагалі нічого не буде передано — неначе нашого перемикача взагалі немає.
Перемикач може бути за умовчанням або включений, або вимкнений. Щоб перемикач був за умовчанням включений, необхідно для нього вказати атрибут checked.
Перемикач checkbox називається незалежним, оскільки його стан не залежить від стану інших перемикачів checkbox. Таким чином, в одній формі може бути одночасно вибрані декілька перемикачів.

Використання незалежних перемикачів checkbox
Проте в HTML передбачений і такий перемикач, який залежить від других. Його ми і розглянемо в наступному пункті.
Залежні перемикачі
Залежний перемикач, так само як і незалежний перемикач, може бути або включений, або вимкнений. При цьому перемикач radio є залежним перемикачем, оскільки на формі може бути тільки один включений перемикач типу radio. Точніше, якщо у формі присутні декілька однойменних залежних перемикачів, то включений з них може бути тільки один. При виборі одного перемикача всі однойменні залежні перемикачі автоматично вимикаються. Як ім'я перемикачів сприймається значення атрибуту name. Може бути тільки один активний перемикач. Розглянемо такий приклад, приведений в лістингу.
Форма із залежними перемикачами
<form action="http://localhost/sex.php" method="post"> <input type=radio
name=sex
value=male
checked>
Чоловік<input type=radio
name=sex value=female>
Жінка<input type=submit
name=go уа1ие=Передать>
</form>
У вікні браузера наша форма виглядатиме таким чином
Перший перемикач (із значенням Male) активний за умовчанням (ми встановилиатрибут checked). Як тільки користувач натисне кнопку Передати, сценаріюsex.php буде переданий параметр sex (атрибут name Залежні перемикачі radioобох перемикачів) з значенням Male. Якщо ж користувач вибере інший варіант (female), сценарію буде передано відповідне значення параметра sex.
Кнопка відправки форми
Останніми елементами управління типа INPUT є кнопки. Кнопка відправки служить для відправки сценарію введених у форму значень. Синтаксис тега INPUT при цьому такий:
<input type=submit [name=go] vаluе=Передати>
Атрибут value визначає текст, який буде написаний на кнопці відправки. Атрибут name визначає ім'я кнопки і є необов'язковим. Якщо значення цього атрибуту не указувати, то скрипту будуть передані введені у форму значення і все. Якщо ж атрибут name для кнопки буде вказаний, то додатково до даним форми буде відправлена пара имя=значение від самої кнопки. Я раджу обов'язково указувати цей атрибут — він нам дуже пригодится при програмуванні на PHP.
Подивитися, як виглядає кнопка відправки, можна на мал. 6.1.
Кнопка скидання
Окрім кнопки submit є еше кнопка reset, яка скидає форму — встановлює для всіх елементів форми значення за умовчанням. Бажано, щоб на вашій формі була така кнопка, особливо, якщо це велика форма. Наявність даної кнопки полегшує очищення форми, якщо були введені неправильні параметри.
<input type=reset value=C6poc>
Кнопка відправки з індивідуальним малюнком
Замість кнопки submit можна використовувати малюнок для відправки даних. При клацанні на цьому малюнку відбудеться те ж, що і при натисненні на кнопку submit. Проте, окрім цього, сценарію будуть передані координати місця твору клацання на малюнку. Координати будуть передані у форматі: имя.х=коор_Х, имя.у=коор_У.
<input type=image name=имя src=малюнок>