Лабораторна робота № 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. Отже, створити кнопку підтвердження, виявляється, дуже просто.
Зображення на кнопці підтвердження
Якщо ви хочете використовувати графіку на кнопці підтвердження, то можна встановити значення атрибута type="image". У цьому випадку прийдеться вказати і URL, по якому міститься графічний файл і альтернативний текст (для текстових браузерів). У підсумку елемент буде виглядати в такий спосіб: <input type="image" src="images/buttons/submit.gif" alt="Підтвердити" /> Тепер розглянемо, як створювати власні кнопки.
Власні кнопки
У стандартах, починаючи з HTML 4.01, є ще один елемент, призначений спеціально для створення кнопок на формі, — це <button>. У нього є атрибут type, що може приймати три значення: reset, submit і image. Особливість цього елемента полягає в тому, що він є контейнером, тобто може містити зовсім довільну розмітку. Наприклад:
<button name="submit" type="submit"> <span style="font-family: Courier: font-variant: small-caps; font-size: 14pt">Відправити </span></button>
<button name="reset" type="reset"> <img src="reset.gif" alt="Очистити" /> </button>
В елемента <button> можуть бути наступні атрибути: name, type і value, при цьому type потрібно тільки для завдання трьох стандартних значень, про які вже говорилося раніше. Якщо ви хочете, щоб ваш код знаходився у відповідності зі стандартами, включайте в елемент <button> атрибут name.
Створення меню
Ще один вид елементів контролю — це меню. Якщо дотепер мова йшла в основному про елемент <input>, то тут усе вертиться навколо елемента <select>. З його допомогою створюються меню, що випадають, прокручювані меню і т.п. У цих випадках користувачу пропонується зробити свій вибір, але не дається можливість увести власний текст. Обов'язковим є атрибут name, призначення якого вже повинно бути зрозуміло, а за допомогою атрибута size можна задати кількість одночасно виведених на екран значень.
Зверніть увагу: <select> є контейнером. Значення (визначаються за допомогою <option>) повинні розміщатися між відкриваючим і закриваючим тегами <select> і </select>. Коли користувач вибирає який-небудь пункт меню, то відповідне значення привласнюється змінній, описаній в відкриваючому тегу <select>.
Атрибут selected="selected" установлює значення за замовчуванням у меню. Прикладом може бути наступний код:
Чи часто Ви відвідуєте цей сайт?
<select name="frequency">
<option selected="selected" value="first">Bnepшe</option>
<option value="monthly">Щомісяця</орtion>
<option value="weekly">Щотижня</орtion>
<option value="daily">Щодня</option>
</select>
Існує ще і такий атрибут, як size, за допомогою якого можна установити кількість показуваних рядків. Просто замініть перший рядок приклада, що написаний раніше, на: <select name="frequency" size="4">
У першому прикладі наведення мишки на меню приводить до «вискакування» декількох рядків. В другому прикладі ці рядки (кількість яких установлюється параметром size) з'являються на екрані відразу ж після завантаження сторінки.
Але що робити, якщо виникне необхідність вибрати кілька пунктів меню одночасно? Для цього існує спеціальний атрибут елемента <select>. Синтаксис наступний: multiple="multiple". Він змушує меню завжди виглядати як прокручуваний список, незалежно від того, яке значення привласнене атрибуту size, (size опускати все рівно не можна, оскільки з його допомогою визначається, скільки рядків буде в списку.) Як приклад розглянемо наступний код:
<р> Про що б ви хотіли довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе,що вас цікавить)</р>
<select name="topics" multip1e="multiple">
<option value="upgrade"> Відновлення комп'ютерів </option>
<option value="repair"> Ремонт комп'ютерів </option>
<option value="apps"> Практичні ради користувачам </option>
<option value="tricks"> Маленькі хитрощі </option>
<option value="news"> Новини комп'ютерної індустрії </option>
<option value="rumor"> Огляди новинок </option>
<option value="none" selected="se1ected"> Нічого з перерахованого </option>
</select>
У даному випадку користувач може вибрати стільки пунктів, скільки захоче. А може і нічого не вибрати.
Перш ніж закінчити розмову про елемент <select> і про меню взагалі, згадаємо ще дещо. Існує, наприклад, елемент <optgroup>. Він дозволяє групувати кілька пунктів меню усередині одного <select>. Розгляньте уважно наступні приклади:
<р> Про що б ви хотіли б довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе, що вас цікавить)</р>
<select name="topics" multiple="multiple">
<option value="upgrade"> Відновлення комп'ютерів </option>
<option value="repair"> Ремонт комп'ютерів </option>
<option value="apps"> Практичні ради користувачам </option>
<option value="tricks"> Маленькі хитрощі </option>
<option value="news"> Новини комп'ютерної індустрії </option>
<option value="rumor"> Огляди новинок </option>
<option value="none" selected="selected"> Нічого з перерахованого </option>
</select>
Нічого неправильного тут немає, однак набагато приємніше було б розділити пункти по темах, особливо важливо це зробити, якщо в майбутньому ви плануєте збільшити список. Для цього використовуємо елемент <optgroup>.
<р> Про що б ви хотіли б довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе, що вас цікавить)</р>
<select name="topics" size="15" multiple="multiple">
<optgroup label="Залізо">
<option value="upgrade"> Відновлення комп'ютерів </option>
<option value="repair"> Ремонт комп'ютерів </option>
</optgroup>
<optgpoup label="Програми">
<option value="apps"> Практичні ради користувачам </option>
<option value="tricks"> Маленькі хитрощі </option>
</optgroup>
<optgroup label="Новини">
<option value="news"> Новини комп'ютерної індустрії </option>
<option value="rumor"> Огляди новинок </opt1on>
</optgroup>
<option value="none" selected="selected"> Нічого з перерахованого </option>
</select>
Майте на увазі, що далеко не всі браузери знають, що таке <optgroup>. Утім, нічого страшного в цьому немає — у крайньому випадку результатом буде звичайний список без підзаголовків.
ХІД РОБОТИ
Створіть сторінку персоналізації й ідентифікації, подібно до сторінки реєстрації електронної поштової скриньки.