Обробка параметрів запитів

Далее ⇒

Лабораторна робота №11-12. Робота з формами

ТЕМА: Вивчення й практичне застосуванняформ HTML та елементів керування.

ЦІЛЬ: Навчитися передавати дані серверу з допомогою форм.

ЗНАТИ: Методи передачі даних. Елементи керування форм.

УМІТИ: Застосовувати для передачі інформації серверу всі типи елементів керування формою.

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

Способи передачі параметрів сценарію

Як Ви вже зрозуміли, найпоширенішими методами передачі даних між браузером і сценарієм є GET і POST. Однак вручну задавати рядка параметрів для сценаріїв і до того ж URL-Кодувати їх, погодитеся, досить утомливо. Давайте подивимося, що пропонує нам для полегшення життя HTML.

Ми будемо розглядати метод GET для передачі запитів серверу.

Навіть програмістові утомливо набирати параметри в URL вручну. Різні ?, &, %... Уявіть собі користувача, якому необхідно це робити... На щастя, існують зручні можливості мови HTML, які, звичайно, підтримуються браузерами.
Отже, нехай у нас на сервері в кореневому каталозі розміщений файл сценарію script.php. Цей сценарій розпізнає 2 параметри: name і age. Де ці параметри задаються, ми поки не вирішили. При переході за адресою http://www.somehost.com/script.php він повинен відробити й вивести наступну HTML-Сторінку:

Привіт, name! Вам age років!

</body></html>

Зрозуміло, при генерації сторінки потрібно name і age замінити на відповідні значення, передані в параметрах.

Передача параметрів через адресний рядок браузера

Давайте спробуємо включати параметри прямо в URL, у рядок параметрів. Таким чином, якщо запустити в браузері http://www.somehost.com/script.cgi?name=Vasya&age=20 ми одержимо сторінку з потрібним результатом:

Привіт, Vasya! Я знаю, Вам 20 років!

</body></html>

Зверніть увагу, що ми розділяємо параметри символом &, а також використовуємо знак рівності =. Ми пояснимо, що це значить.

Використання HTML-Форм

Як тепер нам зробити, щоб користувач міг у зручній формі ввести своє ім'я й вік? Очевидно, нам необхідно інтерактивне вікно, у яке здійснюється введення наших параметрів, причому через браузер.

Отже, нам знадобиться звичайний HTML-Документ (наприклад, з ім'ям form.html і розташований у кореневому каталозі) з елементами діалогу - полями введення тексту й кнопкою, при натисканні на яку запуститься скрипт script.php. Текст документа form.html:

Введіть ім'я: <input type=text name="name"><br>

Введіть вік: <input type=text name="age"><br>

</form>

</body></html>

Завантажимо наш документ у браузер. Тепер, якщо ввести в поле з ім'ям своє ім'я, а в поле для віку — свій вік і нажати кнопку, браузер автоматично звернеться до сценарію hello.php і передасть через ? всі атрибути, розташовані усередині тегів <input> у формі й розділені символом & у рядку параметрів. Помітьте, що в атрибуті action тега <form> ми задали відносний шлях, тобто сценарій hello.php буде шукатися браузером у тім же самому каталозі, що й файл form.html.

Як ми знаємо, всі перекодування й перетворення, які потрібні для URL-Кодування даних, здійснюються браузером автоматично.

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

Залишилося тепер тільки визначитися, як ми можемо витягти $name і $age з рядка параметрів і обробити їх.

Обробка параметрів запитів

Веб-Програмування в більшій частині являє собою саме обробку різних даних, введених користувачем — тобто, обробку HTML-Форм.
Мабуть, немає іншої такої мови, як PHP, який би настільки полегшив вам завдання обробки й розбору зовнішніх змінних, тобто змінних, які надійшли з HTML-Форм (із браузера користувача). Справа в тому, що в мову PHP убудовані всі необхідні можливості, так що вам не прийде навіть і замислюватися над особливостями протоколу HTTP і міркувати, як же відбувається відправлення й прийом POST-Форм або навіть завантаження файлів.Розроблювачі PHP усі передбачили.

А тепер спробуємо написати сценарій, що приймає в параметрах ім'я користувача і його вік і виводить:

"Привіт, <ім'я>! Вам <вік> років!"

Тобто нам потрібно передати в скрипт 2 параметри: name і age.

Тепер ми напишемо скрипт script.php, що приймає два параметри: name і age, а також HTML-Документ із формою, що ці два параметри буде передавати в наш новий скрипт:

<?php

echo "Привіт, $_GET['name'] ! Вам $_GET['age'] років !";

А от і HTML-Документ send.html, за допомогою якого ми параметри name і age передамо нашому скрипту:

Введіть ім'я: <input type=text name="name"><br>

Введіть вік: <input type=text name="age"><br>

</form>

</body></html>

Тепер наш скрипт приймає два параметри name і age і виводить у браузер результат формату: "Привіт, <ім'я>! Вам <вік> років!".

Зверніть увагу на адресний рядок браузера після передачі параметрів сценарію, вона буде виглядати приблизно в такий спосіб (без URL-Кодування кирилиці):

http://localhost/script.php?name=Сашко&age=23

Залежно від установок вашого інтерпретатора, існує кілька способів доступу до даних з ваших HTML-Форм. От кілька прикладів:

<?php

// Доступно, починаючи з PHP 4.1.0

echo $_GET['username'];

echo $_POST['username'];

echo $_REQUEST['username'];

import_request_variables('p', 'p_');

echo $p_username;

// Доступно, починаючи з PHP 3. Починаючи з PHP 5.0.0, ці довгі визначені

// змінні можуть бути відключені директивою register_long_arrays.

echo $HTTP_GET_VARS['username'];

// Доступно, якщо директива PHP register_globals = on. Починаючи

// з PHP 4.2.0, значення за замовчуванням register_globals = off.

// Використання/довіра цьому методу непереважна.

echo $username;

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

Форма в HTML-Документі реалізується тегом-контейнером FORM, у якому задаються всі керуючі елементи - поля введення, кнопки й т.д. Якщо керуючі елементи зазначені поза вмістом тегу FORM, те вони не створюють форму, а використовуються для побудови користувальницького інтерфейсу на веб-сторінці, тобто для привнесення в неї різних кнопок, прапорців, полів введення.

Обробка елементів форми виробляється за допомогою скриптов, але вони можуть і взагалі ніяк не оброблятися.

Імена елементам форми привласнюються через їхній атрибут NAME.

Кожний елемент форми може мати початкове й кінцеве значення, які є символьними рядками. Початкові значення елементів не міняються, завдяки чому може здійснюватися скидання значень, зазначених користувачем. Результатом цієї дії буде установка всіх керуючих елементів форми у своїх первісні використовувані за замовчуванням значеннях.

В HTML 4.01 визначені наступні типи керуючих елементів:

· Кнопки - задаються за допомогою елементів BUTTON і INPUT. Розрізняють:

» кнопки відправлення - при натисканні на них, вони здійснюють відправлення форми серверу;

» кнопки скидання - при натисканні на них, що управляють елементи приймають первісні значення;

» інші кнопки - кнопки, для яких не зазначена дія, виконуване за замовчуванням при натисканні на них.

· Залежні перемикачі (перемикачі із залежною фіксацією) - задаються елементом INPUT і являють собою перемикачі "вкл/викл". Якщо кілька залежних перемикачів мають однакові імена, то вони є взаємовиключними. Це значить, що якщо одна з них ставиться в положення "вкл", те всі інші автоматично - у положення "викл". Саме це і є перевагою їхнього використання.

· Незалежні перемикачі (перемикачі з незалежною фіксацією) - задаються елементом INPUT і являють собою перемикачі "вкл/викл", але на відміну від залежних, незалежні перемикачі можуть приймати й змінювати своє значення незалежно від інших перемикачів. Навіть якщо останні мають таке ж ім'я.

· Меню - реалізується за допомогою елементів SELECT, OPTGROUP і OPTION. Меню надають користувачеві список можливих варіантів вибору.

· Введення тексту - реалізується елементами INPUT, якщо вводиться один рядок, і елементами TEXTAREA - якщо кілька рядків. В обох випадках введений текст стає поточним значенням керуючого елемента.

· Вибір файлів - дозволяє разом з формою відправляти обрані файли, реалізується HTML-Елементом INPUT.

· Сховані керуючі елементи - створюються керуючим елементом INPUT.

Як бачите, дуже багато елементів задаються за допомогою універсального тегу INPUT.

Тег FORM - контейнер форм

Як уже було сказано, форма в HTML-Документі реалізується тегом-контейнером FORM. Цей тег своїми атрибутами вказує адресу сценарію (скрипта), якому буде послана форма, спосіб пересилання й характеристику даних, що втримуються у формі. Початковий і кінцевий теги FORM задають границі форми, тому їхня вказівка є обов'язковим.

Приведемо атрибути тегу FORM:

· action- єдиний обов'язковий атрибут. У якості його значення вказується URL-Адреса запитуваного скрипта, що буде обробляти дані, що втримуються у формі. Припустимо використовувати запис mailto:URL, завдяки якій форма буде послана по електронній пошті. Якщо атрибут ACTION все-таки не зазначений, то вміст форми буде відправлене на URL-Адресу, з якого завантажувалася дана веб-сторінка;

· method - визначає метод HTTP, який використовується для пересилання даних форми від браузера до сервера. Атрибут METHOD може приймати два значення: GET і POST;

· enctype- необов'язковий атрибут. Вказує тип умісту форми, використовуваний для визначення формату кодування при її пересиланні. В HTML визначені два можливих значення для атрибутів ENCTYPE:

- APPLICATION/ WWW-FORM-URLENCODED (використовується за замовчуванням);

- MULTIPART/ FORM-DATA.

Тег INPUT і його методи

Елемент INPUT є найбільш вживаним тегом HTML-Форм. За допомогою цього тегу реалізуються основні функції форми. Він дозволяє створювати усередині форми поля введення рядка тексту, ім'я файлу, пароля й.т.буд.

Зверніть увагу на особливість INPUT - у нього немає кінцевого (завершального) тегу. Атрибути й особливості використання INPUT залежать від способу його використання. Розглянемо ці способи.

Однорядкові поля введення

Найбільше часто використовуються поля введення - адже навіть кнопка є полем введення інформації. Почнемо з поля введення текстової інформації. Формат тегу INPUT для створення поля введення текстового рядка:

Даний тег створює поле ввода з максимально припустимою довжиною тексту maxlen і розміром в size знакомісць. Якщо зазначено атрибут value, то в поле буде постійно відображатися значення даного атрибута. У квадратних дужках [] позначені необов'язкові атрибути.

От приклад однорядкового поля введення:

Поля введення пароля

Звичайно, ім'я користувача можна ввести за допомогою звичайного текстового поля. А от пароль не повинен відображатися на екрані при його введенні. У цьому нам допоможе поле введення пароля:

Принцип роботи даного тегу точно такий же, як і текстового. Різниця полягає в тім, що вводиться информация, що, у полі не відображається, а заміняється "зірочками". Не рекомментуется встановлювати значення за замовчуванням з міркувань безпеки (value).

От приклад поля введення пароля:

Сховане текстове поле

Для передачі службової інформації (про яку користувач навіть не повинен підозрювати) використовуються сховані поля. За допомогою таких полів, наприклад, можуть передаватися параметри настроювання.

Такі поля передаються серверу, але на веб-сторінці не відображаються.

Незалежні перемикачі

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

Реалізувати це можна знову ж за допомогою тегу INPUT. Для цього тільки необхідно як значення атрибута type указати chechbox.

Якщо перемикач був включений на момент натискання кнопки відправлення даних, то скрипту буде переданий параметр ім'я=значення. Якщо ж прапорець виключений, то сценарію взагалі нічого не буде передано - начебто перемикача взагалі немає.

Перемикач за замовчуванням або включений, або виключений. Щоб перемикач був за замовчуванням включений, необхідно для нього вказати атрибут checked.

Перемикач checkbox називається незалежним, тому що його стан не залежить від стану інших перемикачів checkbox. Таким чином, в одній формі може бути одночасно обрано кілька перемикачів.

Приведемо приклад незалежних перемикачів:

Перша опція

Друга опція

Третя опція

Четверта опція

В HTML є й такий перемикач, що залежить від інших перемикачів, він розглядається далі.

Залежні перемикачі

Залежно перемикач, так само як і незалежний перемикач, може бути або включений, або виключений. При цьому перемикач radio є залежним перемикачем, оскільки на формі може бути тільки один включений перемикач типу radio. Точніше, якщо у формі присутні кілька однойменних залежних перемикачів, те включений з них може бути тільки один. При виборі одного перемикача всі однойменні залежні перемикачі автоматично вимикаються. Як ім'я перемикачів сприймається значення атрибута name. Може бути тільки один активний перемикач. Приклад лістингу форми із залежними перемикачами:

<input type=radio name=answer value=yes checked>Так

<input type=radio name=answer value=no>Немає

</form>

Дана форма буде виглядати так:

Так Ні

Перший перемикач (зі значенням так) активний за замовчуванням (ми встановили атрибут checked).

Як тільки користувач натисне кнопку "Відправити", скрипту script.php буде переданий параметр answer (атрибут name обох перемикачів) зі значенням так або ні (залежно від того, який варіант вибрав користувач).

Кнопка відправлення форми

Ще одним елементом управління типу INPUT є кнопки. Кнопка відправлення служить для відправлення скрипту введених у форму параметрів. Синтаксис тегу INPUT при цьому такій:

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

Далее ⇒