Лекція 7. Використання html-форм

У цій лекції розбирається можливість взаємодії читача HTML-Сторінок із сервером Web-Вузла. Докладно описується підмножина HTML, яке зветься HTML-Форми.

• HTML-Форми

• Завдання форми - елемент FORM

  • Атрибут TYPE=text

  • Атрибут TYPE=checkbox

  • Атрибут TYPE=radio

  • Атрибут TYPE=image

  • Атрибут TYPE=password

  • Атрибут TYPE=reset

  • Атрибут TYPE=submit

  • Атрибут TYPE=hidden

  • Використання списків у формі - <SELECT>

Html-Форми

Форми були створені й використовуються в WWW для одержання відгуку користувача на надану інформацію й збору даних про користувача. Після заповнення користувачем форми й запуску процесу її обробки, інформація з її попадає до програми, що працює на сервері. Простота використання циклодрому <MAILTO:> у формах дозволяє навіть власникам невеликих сторінок одержувати відгук від своїх читачів. Для обробки великої кількості відгуків використовуються програми, що підтримують Common Gateway Interface (CGI) і розташовані на сервері, на адресу якого надходять відгуки. У такий спосіб користувач може інтерактивно взаємодіяти з Web-Сервером через Internet.

Завдання форми - елемент form

Елемент FORM позначає документ як форму й визначає границі використання інших циклодромів, розташовуваних у формі. Циклодром <FORM> визначається послідовністю циклодромів <INPUT>, розміщених усередині пари <FORM> і </FORM>. У формі використовується як метод (method), так і дія (action) для опису обробки даних, що вводяться користувачем у форму. Метод (GET або POST) визначає, як повинні оброблятися вхідні дані з форми, а дія вказує на URI (Uniform Resource Identifier) програми, відповідальної за обробку цих даних.

<FORM METHOD=post

ACTION=mailto:yourname@your.email.address>

Визначення елементів керування форми - тегом <INPUT>

Даний циклодром використовують для визначення області усередині форми, куди вводяться дані. Він формує поле для уведення інформації користувачем. Це може бути текстове поле, опція, зображення або кнопка. Вид поля уведення визначається значенням атрибута TYPE.

Атрибут TYPE=text

Коли користувачеві необхідно ввести невелику кількість тексту (одну або кілька рядків), використовується циклодром <INPUT>, і атрибут TYPE установлюється в значення text. Це значення прийняте за замовчуванням і вказувати його необов'язково. Крім того, задається атрибут NAME для визначення найменування змінної поля.

Ваше ім'я <INPUT NAME=Name SIZE=35>

Є ще три додаткових атрибути, які можна використовувати. Перший називається MAXLENGTH, він обмежує число символів, що вводяться користувачем у поточне поле. За замовчуванням дане число не обмежене. Другим атрибутом є SIZE, що визначає розмір видимої на екрані області, займаної поточним полем. Значення за замовчуванням визначається типом браузера. Якщо значення MAXLENGTH більше, ніж SIZE, браузер будуть прокручувати дані у вікні. Останнім з додаткових атрибутів є атрибут VALUE, що забезпечує початкове значення поля уведення.

Атрибут TYPE=checkbox

Для створення незалежних прапорів у формах HTML використовується циклодром <INPUT> з атрибутом TYPE=checkbox. Залежно від змісту форми користувач може відзначити кілька прапорів. Коли форма використовує циклодром <INPUT> з атрибутом CHECKBOX, у ньому повинні бути присутнім і атрибути NAME, і VALUE. Атрибут NAME указує на найменування даного поля (прапора) уведення. В атрибуті VALUE буде втримуватися значення поля.

<BR>Росія<INPUT NAME="Країна" TYPE=checkbox VALUE=" Україна">

Країни СНД<INPUT NAME="Країна" TYPE=checkbox VALUE=" Росія ">

У деяких випадках необхідно ініціалізувати даний прапор, як уже відзначений. У таких випадках циклодром <INPUT> повинен містити атрибут CHECKED.

Атрибут TYPE=radio

У деяких випадках потрібно організувати вибір одного з декількох можливих значень. Для створення форми уведення при виборі користувачем одного значення з декількох можливих необхідно використовувати циклодром <INPUT> з атрибутом TYPE=radio. Коли у формі застосовується даний атрибут, у циклодромі <INPUT> повинні бути зазначені атрибути NAME і VALUE. Атрибут NAME указує найменування відповідного поля (кнопки). Атрибут VALUE містить значення поля.

<BR>Стать чоловіча<INPUT NAME="Стать" TYPE=radio

VALUE="Чоловіча">

Стать жіноча<INPUT NAME="Стать" TYPE=radio

VALUE="Жіноча">

Атрибут TYPE=image

Залежно від умісту форми може трапитися так, що користувачеві буде потрібно клацнути мишею на зображенні, щоб завершити роботу з формою. Для цього програмісти використовують циклодром <INPUT> з атрибутом TYPE=image. Коли користувач клацає мишею по зображенню, браузер зберігає координати відповідної крапки екрана. Далі він "обробляє" уведену у форму інформацію. Коли форма використовує атрибут image, циклодром <INPUT> повинен містити також атрибути NAME і SRC. NAME указує найменування поля уведення форми. Атрибут SRC містить URI файлу - джерела зображення. Атрибут ALIGN є додатковим і використовується аналогічно тому ж атрибуту циклодрому <IMG>.

<BR>Виберіть крапку<INPUT TYPE=image NAME=point

SRC=image.gif>

Атрибут TYPE=password

Якщо у формі потрібно організувати уведення пароля, то атрибут TYPE можна встановити в значення password (TYPE=password). Використовуючи даний тип, можна організувати уведення пароля без виводу на екран тридцятилітніх його символів. При цьому варто пам'ятати, що уведені дані передаються по незахищених каналах зв'язку й можуть бути перехоплені.

<BR>Підпис<INPUT NAME=login>Пароль

<INPUT TYPE=password NAME="Слово">

Атрибут TYPE=reset

Коли користувач заповнює форму, йому може знадобитися почати всі спочатку. На такий випадок існує кнопка Reset, по якій користувач може клацнути мишею, щоб повернутися до первісних значень полів. Коли користувач вибирає дану кнопку, форма відновлює первісні значення всіх елементів, у яких є присутнім атрибут TYPE=reset. Для створення кнопки Reset використовується циклодром <INPUT> з атрибутом TYPE=reset. Браузер у свою чергу буде виводити зображення даної кнопки. Якщо у формі використовується атрибут reset, циклодром <INPUT> може додатково містити атрибут VALUE. Даний атрибут визначає напис на зображенні кнопки.

<INPUT TYPE=reset VALUE="Очистити форму">

Атрибут TYPE=submit

Використовуючи форму HTML для уведення інформації від користувача, необхідно забезпечити користувачеві можливість завершити уведення даних. Для цього використовується циклодром <INPUT> з атрибутом TYPE=submit. Браузер, у свою чергу, виводить даний елемент, як кнопку, по якій користувач може клацнути, щоб завершити процес редагування. Коли у формі використовується циклодром <INPUT> з атрибутом submit, даний елемент може містити два додаткових атрибути: NAME і VALUE. Атрибут NAME зберігає назва змінної поля у вашій формі. Атрибут VALUE - визначає значення елемента форми, що буде відправлено на сервер або отримано за допомогою клієнтських скриптів.

<BR><INPUT TYPE=submit

VALUE="Відправити повідомлення">

Атрибут TYPE=hidden

Сховані поля. Додавання в циклодром INPUT атрибута TYPE=hidden дозволить включити у відправляється форму, що, значення атрибутів NAME і VALUE, які користувач змінити не може. Такі мітки корисні при наявності декількох форм для подальшої обробки даних.

Створення багатострічкових областей уведення тексту - циклодром <TEXTAREA>

Залежно від типу форми може знадобитися організувати уведення великої кількості тексту. У таких випадках використовується циклодром <TEXTAREA> для створення текстового поля з декількох рядків. Даний циклодром використовує три атрибути: COLS, NAME і ROWS.