HTML-форми призначені для вводу інформації користувачем і широко використовуються в багатьох CGI-програмах.
Форма включає одне або декілька полів для вводу тексту, селекторні кнопки, опції, меню і чутливі до натискань кнопок миші зображення. Форма задається за допомогою тега <form>. Крім вищезгаданих, вона може містити і інші елементи, такі як текст і зображення.
Розглянемо теги, з допомогою яких створюються форми.
Задавати форму можна у будь-якому місці HTML-документу. Її елементи розташовуються між початковим тегом <form> і відповідним заключним тегом </form>. Коли користувач передає форму серверу, броузер посилає на сервер всі значення цих елементів: і порожні, і стандартні, і змінені користувачем.
Обов’язковим атрибутом action тега <form> задається URL прикладної програми, яка призначена для прийому і обробки введених в форму даних. Типовий тег <form> з атрибутом action виглядає наступним чином:
<form action=“http://www.ora.com/cgi-bin/update”>
...
</form>
У відповідності із заданим у прикладі універсальним локатором ресурса броузер повинен встановити контакт з сервером www.ora.com і передати введені користувачем в форму значення прикладній програмі з іменем update, яка знаходиться в каталозі cgi-bin.
Перед передачею даних форми серверу броузер їх особливим чином кодує, що вони не були зіпсовані в процесі передачі. Сервер на свій розсуд або здійснює декодування цих параметрів, або передає їх в закодованій формі в прикладну програму.
Другий обов’язковий атрибут тега <form> - method задає метод, який броузер використовує для передачі даних форми на сервер з метою їх подальшої обробки. Існує два методи: POST і GET.
Тег <input> служить для визначення одного з стандартних елементів вводу форми. У цього тега є багато атрибутів, але обов’язковими для кожного елементу є атрибути type і name (для кнопки передачі - тільки type). Атрибут type служить для визначення типу елемента, який включається в форму. Атрибут name служить для присвоєння імені елементу (це ім’я використовується в процесі передачі форми на сервер).
Найбільш корисним (і найпоширенішим) є елемент вводу форми поле вводу тексту. У вікні броузера поле вводу відображається як порожнє поле, в яке поміщається одна стрічка даних. Поле вводу даних забезпечує можливість вводу стрічки даних, яка при передачі форми на сервер інтерпретується як значення відповідного елемента. Для створення поля вводу тексту в формі, яка включається в HTML-документ, необхідно за допомогою директиви <input> встановити тип елемента text. Слід включити також атрибут name.
З допомогою атрибутів size і maxlength задається ширина (в знаках) поля відображення текста вводу і максимальна кількість символів, яку користувач може ввести в це поле. Скориставшись атрибутом value, можна задати для поля початкове стандартне значення.
Поле пароля - подібне до звичайного поля вводу тексту, за винятком того, що символи, які користувач вводить в це поле, на екрані не відображаються. Користувач бачить в полі пароля тільки послідовність символів “*”. Це забезпечує контроль за доступом до паролів та інших важливих даних.
Для того, щоб створити поле пароля, необхідно встановити значення атрибута type рівним password. Слід відмітити, що використання поля пароля не гарантує повної захищеності даних, бо при передачі форми на сервер броузер пересилає його вміст в незашифрованому вигляді.
Поле вибору файла надає користувачеві можливість вибрати файл, який зберігається на його комп’ютері, і при передачі форми послати його на сервер. При відображенні броузером поле вибору файла виглядає як звичайне поле, споряджене кнопкою з надписом “Browse”. Користувач може або ввести ім’я файла з клавіатури, або, скориставшись вищезгаданою кнопкою, вибрати ім’я локального файла в системно-залежному вікні. Поле вибору файла створюється у формі шляхом установки значення file атрибута type.
Опція дозволяє користувачеві швидко і легко виділити елемент в формі або відмінити зроблене виділення. Опції можна групувати, створюючи набори.
Кожна опція створюється шляхом встановлення значення checkbox атрибута type у відповідній директиві <input>. Слід також включити в неї обов’язкові атрибути name і value. При вказівці необов’язкового атрибута checked броузер відображає опцію як відмічену і, якщо користувач не відмінить виділення опції, значення атрибута value буде передане на сервер.
Можна створити групу опцій. Для цього потрібно присвоїти декільком опціям одне значення атрибута name. Броузер автоматично збирає значення елементів цієї групи і передає вибрані значення у вигляді стрічки (де значення елементів вказані через кому) на сервер.
Селекторні кнопки по принципу дії схожі на опції. На відміну від останніх, в групі може бути вибрана тільки одна селекторна кнопка. Селекторна кнопка створюється шляхом присвоєння атрибуту type тега <input> відповідного елемента значення radio. Як і опції, селекторні кнопки вимагають наявності атрибутів name і value; кнопки, яким присвоєно спільне ім’я, складають групу.
Призначення кнопки передачі (<input type=submit>) повністю відповідає її назві: з допомогою цієї кнопки забезпечується передача форми з броузера на сервер. Форма може містити більш ніж одну кнопку передачі. В цей елемент можна включати атрибути name і value.
За допомогою кнопки скидання (<input type=reset>) користувач може скинути (тобто стерти або встановити рівними деяким стандартним значенням) всі елементи форми. По замовчуванню броузер відображає кнопку скидання з надписом “Reset” (або “Clear”).
Користуючись значенням image атрибута type елемента форми <input>, можна створити спеціальну кнопку, що являтиме собою чутливе до натискань кнопки миші зображення. Це кнопка особливого виду, яка формується на основі зображення, заданого користувачем.
За допомогою прихованих полів реалізується можливість вбудовувати в форми інформацію, на спосіб обробки якої не можуть вплинути ні броузер, ні користувач. Ця інформація в будь-якому випадку буде передаватися на сервер, і міняти її неможливо. Значення обов’язкових атрибутів name і value директиви <input type=hidden> автоматично включаються в список параметрів форми, яка передається. Вони служать для “маркування” форми. Таке “маркування” виявляється дуже корисним при виборі різних форм або варіантів форми із сукупності переданих і збережених форм.
Тег <textarea> служить для створення багатострічкової області, призначеної для вводу тексту у вікні броузера. В цій області користувач може ввести практично необмежену кількість стрічок. При передачі форми броузер посилає цей текст разом з його іменем, заданим обов’язковим атрибутом name. Для вказівки розмірів текстової області призначені атрибути cols і rows. Значеннями цих атрибутів визначається видима прямокутна область для багатострічкового вводу.
Львів
interesting sites very interesting sites