Не забудьте вказати свій e-mail, якщо хочете одержати відповідь.

Лабораторна робота № 11

Мета: Використовувати форми і запити при створенні веб-сторінок.

Теоретичні відомості.

Основи HTML-форм

Ідея, що стоїть за електронними формами, наступна: вони дозволяють запитувати й одержувати від користувача інформацію. При цьому частина даних може бути оформлена у виді готових меню, з яких користувачу потрібно тільки вибрати відповідний пункт. Запити можуть бути наступних типів.

• Питання, відповіді на який варто набирати в спеціальних текстових полях (наприклад, відомості про ім'я чи адресу, а також скарги, коментарі і т.п.).

• Питання, відповіді на які варто вибирати з пропонованого списку. Останній може бути організований як у вигляді меню, так і у вигляді набору прапорців.

• Питання, єдині відповіді на які потрібно вибирати за допомогою набору перемикачів.

Форми створюються з використанням набору елементів HTML, що визначають поля вводу, перемикачі і т.п. Кожен створюваний вами елемент керування буде мати своє унікальне ім'я, що буде використовуватися в якості змінної. Вибір, що зробить користувач, буде значенням цієї змінної. Наприклад, якщо полю введення привласнити ім'я city, і користувач уведе Boston, це буде означати, що змінній city привласнили значення Boston.

Змінні і відповідні ним значення передаються на сервер, що, в свою чергу, звертається до невеликих програм, які називаються «скриптами». Скрипти інтерпретують і обробляють отримані дані, причому результатом обробки є звичайно зміна вигляду веб-строрінки. На ній можуть з'явитися якісь дані, що залежать від того, що було введено користувачем, чи яка-небудь проста відповідь на його дії, наприклад, може з'явитися напис «Спасибі».

Елемент <form>

Форми створюються за допомогою спеціального елемента <fогm>, що є контейнером для інших елементів. Загальна схема застосування контейнера наступна:

<form method="get_чи_post" action="URL призначення даних">

Елементи форми...

</form>

Найпростіший елемент <form> може мати два атрибути: method і action. Що вони означають? Атрибут method визначає спосіб відправлення даних на сервер. Можливі значення: post чи get. Метод get означає, що дані форми будуть додані в кінець URL призначення. У більшості випадків це накладає серйозні обмеження на розміри даних (найчастіше не більш 100 символів). Утім, якщо форма складається з одного-двох елементів і важливо передавати дані з високою швидкістю, то використовується саме get. Наприклад:<form method="get" action="/cgi-bin/search">. Якщо ж ви збираєтеся помістити велику кількість даних у велику форму, метод get використовувати не варто. Для таких випадків існує post, що посилає дані окремо і не має практичного обмеження на їхній розмір. Відкриваючий тег елемента <form> при використанні post виглядає так: <form method="post" action="/cgi-bin/survey.pl">

Другим атрибутом <form> є action. Він повинний містити URL скрипта, який буде обробляти отримані дані. Дуже часто скрипти зберігаються в директоріях за назвою bin/ чи cgi-bin/ на сервері.

Прикладом елемента, що задає границі форми, може бути наступний код:

<form method="post" action="http://www.fakecom.net/cgi-bin/survey.pl"> </form>

Як і будь-який інший контейнер, що відкривається і закривається, теги <form> і </form> цілком визначають форму. Звичайно, не можна сказати, що ці теги роблять багато чого, однак вони дійсно визначають елемент цілком. Крім того, варто пам'ятати, що форми не можуть бути вкладеними. Перед тим як почати нову форму, необхідно поставити закриваючий тег попередньої.

Створення форм

Ви вже знаєте, як позначити границі форми, ми можемо приступити до заповнення контейнера <form> змістом. А це означає, що у формі з'являться поля вводу, перемикачі, прапорці, кнопки і т.д.

Текстові поля й атрибути

Одне з найбільш розповсюджених застосувань форм — це одержання від користувача деякої текстової інформації, за допомогою якої організується зворотний зв'язок на сайті. Це можуть бути зауваження по оформленню вмісту сайту, коментарі і т.п. Потрібно визначити простір для введення тексту. Воно організується за допомогою елемента <textarea>. Можна встановити число виведених на екран стовпчиків і рядків, хоча насправді користувач зможе ввести стільки тексту, скільки йому потрібно. Це робиться в такий спосіб:

<textarea name="name" rows="число" соls="число"> Текст за замовчуванням </textarea>

Елемент <textarea> є контейнером. Усередині нього міститься текст, що буде виводитися в текстовому полі за замовчуванням. Наприклад, деякі вказівки по заповненню форми і, зокрема, текстового поля. Приклад:

<form method="post" action="/cgi-bin/form1.pl">

<textarea name="comments" rows="4" cols="40">

Уведіть тут свої коментарі."

Не забудьте вказати свій e-mail, якщо хочете одержати відповідь.

</textarea>

</form>

Текст, що міститься усередині <textarea>, з'явиться в текстовому полі в тому ж виді, в якому він був набраний.

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

Атрибути rows і cols можуть приймати будь-які чисельні значення, але варто вибирати їх з таким розрахунком, щоб текстове поле помістилося цілком у звичайному вікні браузера. Браузери кишенькових комп'ютерів і деякі текстові браузери можуть виводити від 40 до 60 стовпчиків.

Серед інших атрибутів <textarea> є такий, як readonly, (Для сумісності зі стандартом XHTML варто писати readonly="readonly".) Цей атрибут унеможливлює редагування текстової області. У цьому випадку на сервер відсилається той текст, що укладений між відкриваючим і закриваючим тегами елемента <textarea>.

Елемент <input>

Елемент, що ми тільки що розглянули, <textarea>, — це базовий інструмент вводу даних. Користувач може вводити довільний текст визначеного розміру. Однак дуже часто потрібно накласти визначені обмеження на кількість відповідей, що можуть дати користувачі. Довільний текст дуже складно програмно обробляти. Набагато простіше працювати з обмеженим набором заздалегідь відомих значень. У цьому вам допоможе елемент <input>. Він дозволяє створити один з декількох керуючих елементів, серед яких наступні:

• Поле вводу (type="text"). Це майже те ж саме, що і текстове поле, але складається з одного невеликого рядка. Звичайно використовується для введення імені чи адреси користувача.

• Пароль (type="password"). У цьому спеціальному полі вводу дані, що друкуються користувачем, не виводяться на екран.

• Прапорець (type="checkbox"). Користувач має можливість «установити» чи «зняти» прапорець.

• Перемикач (type="radiо"). Користувач може вибрати тільки одне значення з ряду пропонованих.

• Сховане поле (type="hidden"). Це спеціалізований елемент уведення, у якому нічого не можна ввести. На сервер посилається деяке значення, задане за замовчуванням.

• Керуюча кнопка (type="button", type="reset" чи type="submit"). Кнопки, призначені для підтвердження чи скасування введення і для інших цілей.

Формат елемента <input>: <input type="один_з_зазначених_типів" name="ім'я" size=''число" maxlength=''число" />

Обов'язковими є тільки атрибути type і name. Деякі варіації на тему стандартного <input> дозволяють включати ще й атрибут value, що використовується для встановки одного з можливих значень. Крім того, існує ряд додаткових атрибутів, але вони в основному є специфічними для яких-небудь елементів керування.

Поле введення

Перше значення атрибута type, що ми розглянемо, — це text. Створюється один рядок вводу, довжину якого можна призначити за допомогою size. Зверніть увагу на те, що розмір поля вводу і максимальна кількість символів, що може ввести користувач, задаються окремо і можуть відрізнятися. Тобто можна створити таке поле, розміри якого більше (що звичайно і робиться) чи менше максимально можливої довжини рядка, що вводиться. От приклад поля введення:

Прізвище: <input type="text" name="last_name" size="40" maxlength="40" />

При бажанні за допомогою атрибута value можна задати значення поля вводу за замовчуванням, як показано:

Місто: <input="text" name="city" size="50" maxlength="50" value="Caнкт-Петербург" />

Поля вводу пароля

Установка значення type="password" майже рівноцінна установці type="text". Різниця полягає лише в тім, що в поле вводу пароля звичайно не друкується те, що набирає користувач. Воно або залишається порожнім, або заповнюється замість букв зірочками, кружечками чи іншими значками, що дозволяють, з одного боку, зрозуміти, скільки букв уже введено, з іншого боку - сховати від сторонніх очей сам пароль. От приклад використання поля вводу пароля:

Введіть ім'я користувача: <input type="text" name="username" size="25" maxlength="25" /> Уведіть пароль: <input type="password" name=''password1" size="10" maxlength="10" />

Слід зазначити, що єдиний «захист», в даному випадку, — це використання горезвісних «значків». Що стосується самого пароля, то він спокійно передається браузером у явному виді.

Прапорці

Якщо установити значення атрибута type="checkbox", то з'явиться прапорець (вимикач), що дозволяє задавати логічні значення яких-небудь параметрів. В основному їх застосовують, коли можливі тільки два стани змінної. Можна заздалегідь визначити початковий стан прапорця, тобто установлений він чи знятий. Для цього застосовується атрибут checked="checked". Наприклад:

Звідки ви довідалися про нас?<br />

<input type="checkbox" name="web" checked="checked" />Пошукова програма в Інтернеті чи Інтернет-посилання.

<input type="checkbox" name="advert" />Реклама по радіо чи телебаченню.

<Input type="checkbox" name="press" />Із газети.<br />

Увімкніть прапорець, щоб підписатися на наше розсилання:

<input type="checkbox" name="mailing" />

У цьому прикладі всі прапорці є незалежними. Наприклад, можна установити одночасно кілька прапорців, і це буде цілком нормальною дією. Перші три прапорці являють собою єдину групу, оскільки є можливими відповідями на те ж саме питання. Четвертий прапорець стоїть трохи окремо, оскільки з першими трьома він ніяк не зв'язаний.

Перемикачі

Як і прапорці, перемикачі (type="radio") призначені для здійснення вибору з заданого набору значень. Різниця між ними полягає в тому, що перемикачі змушують користувача вибрати єдине придатне значення з декількох, тоді як прапорець означає двоїчний вибір (Істина/Неправда).

Звичайно, radiо чимось нагадує Checkbox, однак є одне істотне розходження: вся група перемикачів, скільки б їх не було, повинна мати той самий name. Toбто не один перемикач, а усі разом задають змінну.

Кожен перемикач повинний також мати атрибут value, що, власне, і задає значення змінної, ім'я якої визначається за допомогою name. Розглянемо наступний приклад:

Звідки ви довідалися про нас?<br />

<input type="radio" name="where" value="web" checked="checked" />Пошукова програма в Інтернеті чи Інтернет-посилання.

<input type="radio" name="where" value="advert" />Реклама по радіо чи телебаченню.

<input type="radio" name="where" value="press" />З газети.

<input type="radio" name="where" value="other" />Інше.

При використанні перемикачів завжди варто задавати значення за замовчуванням щоб уникнути пропуску користувачем усієї групи, що приведе до невизначеності змінної і може викликати проблеми з її обробкою. Не слід забувати: незважаючи на те що перемикачі влаштовані таким чином, що неможливо вибрати більше одного значення, може виникнути ситуація, коли взагалі нічого не обрано. Тому подумайте і вирішить, який перемикач буде встановлений за замовчуванням, і напишіть усередині його опису: <checked="checked">.

Сховані поля

Цей «елемент вводу» (input) не має ніякого відношення до вводу даних. Усе, що він робить, — це передає на сервер заздалегідь задане значення. Навіщо це потрібно? Наприклад, якщо ви використовуєте той самий скрипт для обробки декількох форм, то за допомогою схованого поля можна повідомити, яка саме форма зараз буде передавати дані. Елемент <input type="hidden" /> може мати атрибути name і value. Наприклад: <input type="hidden" name="identify" value="form2" />.

Кнопка очищення

Крім різних полів вводу, перемикачів і прапорців, елемент <input> може задавати різного роду кнопки. При установці значення type="reset" буде автоматично створена кнопка для очищення форми. При її натисканні всі параметри приходять у вихідний стан, тобто, попросту говорячи, очищається усе, що ввів чи вибрав користувач. Наприклад:

<input type="reset" value="Очистити форму" />

Атрибут value не є обов'язковим, він дозволяє змінити напис на кнопці. Якщо його опустити, на кнопці буде напис за замовчуванням Reset.

Кнопка підтвердження

Можна створити і кнопку, що, навпаки, підтверджує всі зроблені зміни і готує дані форми до відправлення на сервер. Елемент <input type="submit"> може мати всього один параметр value, за допомогою якого можна змінити напис на кнопці. Кнопка підтвердження призначена тільки для відправлення даних, уведених користувачем. Гляньте на наступні два приклади:

<input type="submit" />

<input type="submit" value=''Поїхали!" />

На кнопках можна писати все, що завгодно, однак пам’ятайте, що занадто короткі написи типу ОК несуть мало інформації. Щоб збільшити розмір кнопки, можна діяти в такий спосіб: навколо напису поставити кілька зайвих пробілів.

Форма визначить, як і куди відправляти дані, завдяки атрибутам method і action. Отже, створити кнопку підтвердження, виявляється, дуже просто.