Файл: Лабораторна робота 5,1.doc

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

У нижче представлених прикладах описується обробка інформації користувача з форм. До елементів форм відносяться однорядкове текстове поле, текстова область, перемикачі, прапорці, списки, приховані поля форм, поля введення паролів і кнопки. У прикладах використовуються дві Web -страницы. Перша сторінка містить форму для введення даних користувача і має розширення .html. Друга сторінка обробляє введену інформацію засобами мови PHP і має розширення .php.

Текстові поля

Текстові поля є одними з найбільш відомих елементів управління формами. У них користувач Web -страницы може ввести будь-яку інформацію. Текстові поля введення створюються за допомогою тега <INPUT>, у якому атрибуту "type" привласнюється значення "text".

Синтаксис:

<INPUT type="text" name="TextBox" size="n" maxlength="m">

де type - тип поля,

name - ім'я поля як елементу форми,

size - розмір видимої частини текстового поля на екрані,

maxlength - розмір поля.

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

HTML -код форми для введення інформації представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання текстового поля</TITLE>

</HEAD>

<BODY>

<FORM method= "GET" action="text.php">Хто Ваш улюблений автор?

<INPUT name="Author" type="text"><BR><BR>

<INPUT type="submit" value= "Відправити">

</FORM>

</BODY></HTML>

Реалізація цього коду представлена на малюнку 5.1

Малюнок 5.1 - Введення улюбленого автора

Таким чином, як видно на малюнку 5.1, в цьому прикладі, при завантаженні Web -страницы, на екрані з'являється однорядкове текстове поле, в яке користувачеві необхідно ввести інформацію і натиснути кнопку "Відправити". Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл text.php.

Код файлу-обробника представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання текстового поля</TITLE>

</HEAD>

<BODY>

<B>Ваш улюблений автор:<B>

<?php

echo $_GET['Author'];

</BODY>

</HTML>

Реалізація цього коду представлена на малюнку 5.2.

Малюнок 5.2 - Результат обробки введеного автора

Як видно на малюнку 5.2, на екран виводиться інформація про улюбленого автора, тобто "Alexandr Pushkin". Програма обробки введених даних text.php, складається з одного рядка РНР-коду : "$_GET ['Author']", яка відображує вміст змінної "$Author". Ця змінна не генерується в РНР-коді, а автоматично створюється, як частина масиву "$_GET", при передачі даних на сервер. При цьому "GET" означає метод протоколу HTTP, за допомогою якого передаються дані.

У HTML -файле було створене текстове поле з ім'ям "Author". Коли дані з форми передаються Web -серверу, створюється масив "$_GET" з елементом "Author". Також на малюнку 3.2, в рядку вікна браузеру представлений результат запиту, в якому на сервер передається пара "змінна"="значення". У цьому прикладі змінної "Author" привласнюється значення "Alexandr Pushkin", тобто на сервер передається пара "Author=Alexandr+Pushkin" і цей рядок видна користувачеві Web -страницы. Цей рядок запиту вверху сторінки виглядає таким чином: "?Author=Alexandr+Pushkin", оскільки використовується метод GET. Використання методу GET змушує браузер відправляти інформацію з форми у вигляді рядка запиту, а не приховувати її в тілі HTTP -запроса.

Також необхідно відмітити, що імена змінних в мові РНР чутливі до регістра символів. Так змінні "Author" і "author" є двома різними змінними. Якщо, в представленому вище прикладі замість змінної "$Author" написати "$author", то вміст цієї змінної на сервер передаватися не буде і на екрані не виведеться (малюнок 5.3).

Малюнок 5.3 - неправильне привласнення імені зміною

Текстова область

Текстові області призначені для того, щоб приймати від користувача пропозиції і навіть цілі рядки. Для того, щоб створити текстову область, слід використовувати HTML -тег <TEXTAREA>.

Синтаксис:

<TEXTAREA name="textarea" rows="n" cols="m">

де name - ім'я поля як елементу форми,

rows - висота поля,

cols - ширина поля.

Нижче представлений приклад використання текстової області для введення інформації про улюблені Web -сайтах користувача.

HTML -код форми для введення інформації представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання текстової області</TITLE>

</HEAD>

<BODY>

<FORM method="POST" action="textarea.php">Перерахуєте Ваші улюблені Web –сайти

<TEXTAREA name="Websites" cols="50" rows="5">

http://

</TEXTAREA><BR><BR>

<BR>

<INPUT type="submit" value="Відправити">

</FORM>

</BODY>

</HTML>

Результат роботи цього коду представлений на малюнку 3.4.

Малюнок 5.4 - Введення інформації в текстову область

Таким чином, як видно на малюнку 5.4, в цьому прикладі, при завантаженні Web -сторінки на екрані з'являється текстова область, в яку користувачеві необхідно ввести інформацію і натиснути кнопку "Відправити". Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл textarea.php.

Код файлу-обробника представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання текстової області</TITLE>

</HEAD>

<BODY>

Ваші кохані Web -сайты:

<?php

echo $_POST['Websites'];

</BODY>

</HTML>

Результат роботи цього коду представлений на малюнку 5.5.

Малюнок 5.5 - Вивід на екран улюблених сайтів

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

Прапорці

Прапорці є ще одним елементом управління формами. Вони застосовні в ситуаціях, коли користувачеві необхідно відповісти на питання, що вимагає строгої однозначної відповіді "та або ні", шляхом установки або зняття "прапорця". Прапорці створюються за допомогою тега <INPUT>, у якому атрибуту "type" привласнюється значення "checkbox".

Синтаксис:

<INPUT name="checkbox" type="checkbox" checked>

де type - тип поля,

name - ім'я поля як елементу форми,

checked - атрибут, який використовується для того, щоб відмітити прапорець, як виділений.

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

HTML -код форми для введення інформації представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання прапорця</TITLE>

</HEAD>

<BODY>

<FORM method="POST" action="checkbox.php">Ви студент ОГУ?

<INPUT name="Choice" type="checkbox">

<BR><BR><INPUT type="submit" value="Відправити">

</FORM>

</BODY>

</HTML>

Реалізація цього коду представлена на малюнку 5.6

Малюнок 5.6 - Перевірку приналежності до студентів ОГУ

Таким чином, як видно на малюнку 5.6, в цьому прикладі, при завантаженні Web -страницы на екрані з'являється прапорець, який користувачеві необхідно відмітити і натиснути кнопку "Відправити". Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл checkbox.php.

Код файлу-обробника представлений нижче.

<HTML>

<HEAD>

<TITLE> Приклад використання прапорця</TITLE>

</HEAD>

<BODY>

<?php

echo $_POST['Choice'] ;

</BODY>

</HTML>

Реалізація цього коду представлена на малюнку 5.7.

Малюнок 5.7 - Результат перевірки

Як видно на малюнку 5.7, з форми на сервер передається не вміст змінної, а лише інформація про те, чи був вибраний цей прапорець або ні. Якщо прапорець був встановлений користувачем, то значенням цієї змінної буде "on". Інакше, змінна взагалі не міститиме даних. Якщо ж потрібно буде передати вміст змінної на сервер, в початковому HTML -файле, в тегу <INPUT>, у атрибуті "value" слід вказати її значення.

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

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

HTML -код форми для введення інформації представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання декількох прапорців</TITLE>

</HEAD>

<BODY>

<P>Виберіть мову, на якій Ви програмуєте, :<BR>

<INPUT name="Choice1" type="checkbox" value="Delphi">Ви програмуєте на Delphi?

<br>

<INPUT name="Choice2" type="checkbox" value="C++/C#">Ви програмуєте на C++/C#?

<br>

<INPUT name="Choice3" type="checkbox" value="Assembler">Ви програмуєте на Assembler?<BR><BR>

<INPUT type="submit" value="Відправити">

</FORM>

</BODY>

</HTML>

Результат роботи цього коду представлений на малюнку 5.8.

Малюнок 5.8 - Вибір мов програмування

Таким чином, як видно на малюнку 5.8, в цьому прикладі, при завантаженні Web -страницы з'являються прапорці, які користувачеві необхідно відмітити і натиснути кнопку "Відправити". Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл checkboxes.php.

Код файлу-обробника представлений нижче.

<HTML>

<HEAD>

<TITLE>Приклад використання декількох прапорців</TITLE>

</HEAD>

<BODY>

<P>Ви вибрали відповідь:</P>

<?php

echo "$_POST[Choice1]<br>";

echo "$_POST[Choice2]<br>";

echo "$_POST[Choice3]<br>";

</BODY>