8. Html-форми

HTML-форми - це особливий вид гіпертекстового документа, призначений для організації інтерактивної взаємодії в електронних виданнях. Саме з допомогою форми ми спілкуємося з пошуковим сервером, починаючи пошук потрібних матеріалів (документів) для роботи, навчання або розваги. Цю форму ми отримуємо з сервера і в спеціальному її вікні задаємо параметри для пошуку, наприклад, вираження у вигляді набору ключових слів, тобто тих слів, які, на нашу думку, найбільш важливі і суттєві в пошукуваному документі. Таким чином, HTML-форма є засобом пересилки даних від віддаленого користувача (клієнта) до Web-сервера.

У мові HTML для завдання форм використовується теги <FORM> і </ FORM>. Цей контейнер розміщується всередині тіла HTML-документа, причому таких контейнерів може бути декілька, але вкладень їх один в інший не допускається. Тег <FORM> може містити кілька параметрів, а саме ACTION, METHOD, ENCTYPE. Деякі браузери підтримують і інші параметри, крім названих трьох стандартних. Перший з параметрів задає адресу (URL) CGI-програми, яка буде обробляти дані цієї форми. Це єдиний обов'язковий параметр тегу <FORM>.

Другий параметр (METHOD) визначає спосіб пересилання даних, що містяться у формі, від браузера до Web-сервера. Він набуває два можливих значення: GET (за замовчуванням) і POST. Значення METHOD = «POST» використовується у разі потреби пересилання на сервер певного файлу, який приєднується до вмісту форми.

Параметр ENCTYPE визначає медіа-тип, який використовується для кодування і пересилки вмісту форми. Зазвичай його називають MIME-типом, де MIME-це абревіатура, яка розшифровується як Multipurpose Internet Mail Extension (багатоцільове розширення для Інтернет-пошти). Саме кодування відповідно до стандарту MIME дозволяє безпомилково пересилати файли, що приєднуються до HTML-формі.

Для створення окремих полів всередині контейнера <FORM> і </ FORM> використовуються теги <INPUT>, <SELECT> і <TEXTAREA>. Перший з цих тегів вживається частіше від інших і забезпечує численні можливості введення інформації. Так, за його допомогою можна здійснити введення тексту різного призначення, створити групу елементів-перемикачів, окремі кнопки для виконання деяких стандартних операцій (наприклад, скидання введених даних), поля для установки прапорців, поле для введення імені файлу, приєднання до форми.

Тег <SELECT> використовується для організації компактної структури для виведення одного варіанта з декількох, що задаються у вигляді списку прокрутки. А тег <TEXTAREA> створює усередині форми поле для введення багаторядкового тексту у вигляді прямокутної області, забезпеченої, за необхідності, смугами прокручування. Коротко розглянемо використання всіх цих тегів.

Тег <INPUT> містить два обов'язкових параметри: TYPE, який задає тип поля введення, і NAME, за допомогою якого ім'я змінної, що відповідає цьому полю введення, передається CGI-програмі.

Параметр TYPE може набувати кількох значень. Одне з цих значень TYPE = «TEXT». У цьому випадку у формі створюється вузька прямокутна ділянка (фрагмент рядка) для введення тексту. Причому при цьому значенні параметра TYPE у тегові INPUT можуть використовуватися три додаткових параметри, а саме: MAXLENGTH = <число>, який визначає максимальну кількість символів, що вводять, SIZЕ = <число>, що задає кількість відображуваних у формі символів, і VALUE, який визначає значення текстового поля за замовчуванням.

Інший варіант текстового поля - це TYPE = «PASSWORD». У цьому випадку вводяться символи відображаються у формі зірочок. Однак реальна безпека переданого пароля не забезпечується, оскільки на сервер цей рядок передається в незашифрованому вигляді, тобто відкрито.

Ще одне значення TYPE = «FILE», причому в цьому випадку для введення тексту (імені локального, тобто розміщеного на комп'ютері клієнта, файлу) у формі створюється кнопка з підписом BROWSE (перегляд). Файл, який обирали в процесі перегляду (локальна адреса його може бути одразу введена в поле), приєднується до вмісту форми при її пересилання на сервер. Для коректного виконання цієї операції повинні бути правильно задані параметри форми: METHOD = «POST» і ENCTYPE = «MULTIPART / FORM-DATA». В іншому випадку замість вмісту файлу на сервер буде передано тільки його ім'я.

Значення TYPE = «CHECKBOX» створює поле введення одного символу-прапорця або перемикача типу «ввімкнуто» - «вимкнуто. Такі поля можуть об'єднуватися в групи шляхом задання для всіх одного імені (NAME). Використовується параметр VALUE, який передає на сервер вибрані перемикачі. Може бути присутнім також параметр CHECKED, який вказує, що певне значення відповідного елемента є обраним за замовчуванням.

Значення TYPE = «RADIO» визначає структуру, подібну багатопозиційний перемикач, тобто набір з кількох вимикачів, один (і тільки один) з яких включений в будь-який проміжок часу. Кожен вимикач оформлений у вигляді кола, усередині якого при його виборі з'являється крапка. Тут параметр VALUE передає на сервер значення вибраної кнопки, а параметр CHECKED встановлює значення за замовчуванням.

Значення параметра TYPE = «RESET» або ж «SUBMIT» відповідно скасовує всі введені у форму значення або ж пересилає вміст форми на сервер. В обох випадках у формі відображаються кнопки з відповідними написами. Написи на кнопках можна русифікувати, задавши значення параметра VALUE рівним «СКАСУВАННЯ» або ж «ОК» («ПЕРЕСИЛАННЯ»). Можливе використання значення параметра TYPE = «IMAGE». У цьому випадку створюється графічне зображення, аналогічне кнопці SUBMIT. Адреса зображення задається стандартним параметром SRC = <URL файла-зображення>, а спосіб вирівнювання значенням параметра ALIGN.

Іноді замість тегу INPUT використовується контейнер <SELECT> і </ SELECT>, який дозволяє організувати вибір значень у межах спискового вікна. Це забезпечує економію простору форми. Приклад контейнера:

<SELECT NАМЕ='имя поля' SIZE=[число видимих ​​елементів списку]>

<OPTION VALUE='значеніе 1-го елемента'> значення елемента

<OPTION VALUE='значеніе 2-го елемента'> значення елемента

<OPTION VALUE='значеніе третє елемента'> значення елемента

</ SELECT>

Якщо потрібна можливість вибору декількох значень елементів списку, то всередині тегу <SELECT> після параметра SIZE використовується додатковий параметр MULTIPLY. Йому не треба задавати певного значення, сама його наявність у межах тегу є достатньою.

Всередині форми може використовуватися ще один контейнер з міткою <TEXTAREA>. Він забезпечує введення багаторядкового тексту в прямокутне вікно. Параметри цього тегу: NAME - для задання імені відповідної змінної, ROWS і COLS - для визначення розміру прямокутного вікна, всередині якого набирається потрібний текст. Може бути заданий текст, що виводиться всередині цього вікна за замовчуванням.

Як приклад можна зупиниться на формі сервера www.rambler.ru, яка виводиться на браузері клієнта, який бажає отримати безкоштовну поштову адресу. Більшість полів - текстові однорядкові, що задаються тегом INPUT і значеннями параметра TYPE, рівним TEXT (E-mail, «Ім'я», «Прізвище», «Вік») і PASSWORD («Введіть пароль» і «Підтвердіть пароль» ). До складу форми включено два перемикачі: для вказівки статі клієнта і його юридичного статусу (фізична особа або представник юридичної особи). Для скорочення розмірів форми (вона і так вийшла досить великою) в ній використовуються чотири спискові вікна з єдиним видимим елементом. Це реалізується за допомогою тег-контейнера <SELECT> зі значенням параметра SIZE = 1.

Нарешті, у формі передбачена область для введення тексту, що задається за допомогою тегу <TEXTAREA>. Розмір цієї області: шість рядків і близько ста стовпців. За умовчанням тут виводиться текст юридичної угоди з клієнтом безкоштовної електронної пошти, який вказує права та обов'язки сторін. Клієнт не може змінювати цей текст, він повинен його прочитати і прийняти умови угоди, викладені в цьому тексті, якщо має намір отримати безкоштовну поштову адресу на цьому сервері. У кінці форми передбачена кнопка типу SUBMIT, представлена ​​у вигляді графічного зображення з написом «Зареєструватися». Якщо клієнт згоден з текстом угоди, він натискає кнопку «Зареєструватися» і отримує безкоштовну поштову адресу на сервері RAMBLER.