Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

metoda / Ml_ITIn_2013

.pdf
Скачиваний:
28
Добавлен:
16.03.2016
Размер:
6.66 Mб
Скачать

61

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Например:

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

<input type="reset" value="текст_на_кнопке">

Определение кнопки включает два атрибута: type -- тип элемента (для кнопки сброса -- reset);

value -- текст, по умолчанию отображаемый на кнопке.

Кнопка сброса выглядит точно так же, как и кнопка отправки данных, если не считать того, что на ней обычно выводится слово «Reset» (рис. 3.1).

62

Задание 2: Разработать HTML-форму с методом Post

вида (рис. 3.3).

Рис. 3.3. Пример 2 HTML формы.

Код Lab1_2.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> Lab1_2</title> </head>

<body bgcolor=#ffacb3>

<b>Регистрационная страница электронной библиотеки</b>

63

<p>Заполнив анкету, вы сможете пользоваться нашей электронной библиотекой

<p><form methos="post" action=""> <table>

<tr>

<td>Введите регистрационное имя</td>

<td><input type=text name="text1" value="" ></td> </tr>

<tr>

<td>Введите пароль</td>

<td><input type=password name="pwd" value=""></td> </tr>

<tr>

<td>Подтвердите пароль</td>

<td><input type=password name="pwd" value=""></td> </table>

<p>

Ваш возраст

<input type=radio name="r1" value="on1" checked>До 20 <input type=radio name="r2" value="on2" >20-30

<input type=radio name="r3" value="on3" >30-50 <input type=radio name="r4" value="on3" >старше 50

<p> На каких языках читаете:

<input type=checkbox name="ch1" value="on" checked>русский <input type=checkbox name="ch2" value="on" >английский <input type=checkbox name="ch3" value="on" >французский <input type=checkbox name="ch3" value="on" >немецкий

<p>Какой формат данных является для вас предпочтительным?

<p><select name="sel" size=2>

<option value="html" selected>HTML</option> <option value="plain">Plain text</option> </select><p>

Ваши любимые авторы:

<p><textarea name="text2" rows=3 cols=30></textarea> <br>

<input type=submit value="OK">  <input type=reset value="Отменить"> </form>

<?php echo "<p>Проверка PHP Лабораторные по базам данных</p>";

?>

<table width="690" border="1" align="center" bgcolor="#FFFFFF"> <tr>

<td><img src="img/footer.jpg" width="690" height="18" alt="Сайт Должен проявиться по наведению мышки"/td>

</tr>

</table>

<center>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

64

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

<br>

</center>

</body>

</head>

Рис. 3.4. Код HTML формы для примера 2 рис. 3.3.

В приведннном коде на рис. 3.4 использованы две новые конструкции:

выпадающий список (select)

<p><select name="sel" size=2>

<option value="html" selected>HTML</option> <option value="plain">Plain text</option> </select><p>

и использование рисунков (img) в форме

<td><img src="img/footer.jpg" width="690" height="18" alt="Сайт Должен проявиться по наведению мышки"/td>

Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select>. Теги <option></option>

позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

<select name="Имя списка" size = ―Размер‖ multiple>

<option value=‖Значение‖>Отображаемый текст в списке</option>

</select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN.

65

Тема №2. Передача значений переменным в сценариях PHP. Использование возможностей метода GET без HTML-формы для передачи значений переменных в сценариях PHP

Цель работы: Получение практических навыков по передаче значений переменным в сценариях РНР с использованием формы и с помощью метода

GET.

Задание 1: Разработать приложение с использованием метода GET,

в котором:

Создается форма ввода (см. рис. 3.5.) помощью программы Lab2.php (см. рис. 3.6.) для введения пользователем данных:

Имени;

Фамилии;

Адреса электронной почты;

Текста - комментария.

Введенные данные PHP-сценарий Lab2_result.php получает данные с формы

.

Отображает извлеченные из формы данные в окне браузера.

Сценарий должен сгенерировать отправку данных в другой PHPфайл, который в свою очередь должен отобразить персональное приветствие пользователю.

Имена использоаванных и взаимосвязанных файлов: Lab2.php (описание и создание формы – рис. 3.6.), Lab2_result.php (обработчик событий для Lab2.php), Lab2_GET.php (использование метода Get)

В форму созданную с помощью Lab2.php (описание и создание формы) введите, например следующую информацию (рис. 3.5.)

Рис. 3.5. Форма с обработчиком на кнопке ―OK‖ .

Исходный код Lab2.php (создание формы).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

66

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Lab2</title>

</head>

<body bgcolor=#CCFFFF>

<form action="Lab2_result.php" method="POST"> <!--Lab2_result.php Обработчик для данной HTML формы. --> <!--В указании имени method надо указывать ковычки !!! --> <table>

<tr>

<td> Введите Ваше имя: <br></td><!--имя атрибута на экране--> <td><input type=text name="FName" size=20></td>

</tr>

<tr>

<td>Last Name</td><!--имя атрибута на экране--> <td><input type=text name="LName" size=20></td> </tr>

<tr>

<td>E-mail</td><!--имя атрибута на экране--> <td><input type=text name="Email" size=40></td> </tr>

<tr>

<td> Примечание </td><!--имя атрибута на экране--> <td><textarea name="Comments" rows=5 cols=40></textarea></td> </tr>

</table>

<input type=submit name="Submit" value="OK">  <input type=reset name="Reset" value="Очистить">

<!--Нажатие кнопки name="Submit" с именем value="OK" приведет к вызову

обработчика данной формы (к аналогичному действию приведет нажатие Enter на любом из полей). Нажатие кнопки name="Reset" с значением value="Cancel" (Очистить) приведет к уничтожению всех объявленных переменных в форме.

&nbsp - непрерывный пробел

Веб-браузеры обычно игнорируют дополнительные символы пробела, введенные в текст страницы. Для этого используется команда &nbsp. Эта команда создает неделимое пустое пространство между элементами страницы, будь то графика или текст. Следует учитывать тот факт, что использование &nbsp вместо пробела между двумя соседними словами гарантирует, что оба слова не будут разнесены по разным строкам в окне браузера - они будут расположены всегда рядом.

--> </form> </body> </html>

Рис. 3.6. Код создания формы для рис. 3.5.

67

Нажатие , (на выше показанной форме рис. 3.5) приводит к следующему результату в окне браузера (рис. 3.7). Отметьте, что имя программы обработчика в адресной строке будет сформировано автоматически.

Рис. 3.7. Результат обработки события после нажатия кнопке ―OK‖ на рис. 3.5.

Код программы (Lab2_result.php), который приводит к этому результату приведен ниже (рис. 3.8).

Lab2_result.php (обработчик для кнопки ―OK‖)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=windows1251" />

<title>Lab2_обработчик</title>

Информация попадает в обработчик - программа Lab2_result.php </head>

<body bgcolor=#FFFFFF><!--Цвет фона белый--> <?PHP

print("<br>В обработчике переменные из HTML кода Lab2.php напрямую не доступны! <br>");

print("Имя переменная FName is: $FName <br>"); print("Указана фамилия is: $LName <br>"); print("e-mail is: $Email <br>"); print("Комментарий: $Comments <br>");

68

print("Через массив POST переменные наверняка будут доступны<br>");

$FName = $_POST["FName"];

print("Имя FName $FName передано через глобальный POST: $_POST[FName] <br>");

//а как указано ниже - даст ошибку

//print("Имя FName $FName передано через глобальный POST: //$_POST['FName'] <br>");

print("Указана фамилия is: $_POST[LName] <br>"); print("e-mail is: $_POST[Email] <br>");

print("В примечании указано $_POST[Comments] <br>");

print("Click <a href=Lab2_GET.php?FName=$FName&LName=$_POST[LName]>here</a>

здесь, чтобы посмотреть как работает метод GET");

//После знака '?' перечислены переменные, которые должны быть //доступны в программе Lab2_GET, которая вызывается по ссылке, //если пользователь кликнет на слове here, то будет вызвана //программа Lab2_GET.php с указанными переменными

//Слово here может быть заменено на смысловое русское слово

?>

</body>

</html>

Рис. 3.8. Код программы обработки события на кнопке ―OK‖.

Если выполнить действие

то будет вызвана программа Lab2_GET.php (рис. 3.10.) результат (рис. 3.9) и исходный код, которой приведен ниже.

Рис. 3.9. Результат обработки события по ссылке HERE.

Обратите внимание на содержимое адресной строки при выводе результата.

69

Код Lab2_GET.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=windows1251" />

<title>Lab2_GET</title> </head>

<body>

<?PHP

//реакция при нажатии на ссылку, см. файл Lab2_GET.php слово

Here

$FName = $_GET['FName']; $LName = $_GET['LName'];

print("<center> Hello из Lab2_GET Имя:'$FName' Фамилия: ' $LName '!!!</center>");

//А так будет ошибка print("<center> Hello из Lab2_GET Имя $FName $Lname !!!</center>");

?>

</body>

</html>

Рис. 3.10. Исходный код программы Lab2_GET.php.

В данной лабораторной работе были получены практические навыки по передаче данных в РНР-сценарий с помощью HTML-форм и с помощью метода GET.

70

Тема №3. Создание формы и РНР-сценария в одном файле

Цель работы: Получение навыков и понимание взаимосвязанной работы формы и ее обработки.

Обработка форм

Все данные, которые Вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Задание 1: Получение данных из текстового поля

Вам необходимо получить данные из текстового поля и многострочного поля ввода и передать их сценарию.

Решение: Необходимо создать HTML форму и PHP – сценарий для обработки формы.

Создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с текстовым полем mytext и текстовой областью msg:

<form action="action.php" name="myform" method="post"> <input type="text" name="mytext" size="50">

<textarea name="msg" cols="20" rows=‖10‖ ></textarea>

<input name="Submit" type=submit value="Отправить данные"> </form>

В этой html-форме нас интересует три элемента: action, который указывает путь к обработчику формы (action.php), имя текстового поля (mytext) и имя многострочного поля вода (msg). Также в форме присутствует кнопка (Submit), при нажатии на которую, происходит передача данных.

После того как html-форма готова, необходимо создать обработчик формы action.php:

<?php

$text = $_POST['mytext']; $msg = $_POST['mytext'];

echo $text; // Выводим содержимое текстового поля

?>

После того как мы введем любые значение в текстовые поля и нажмем на кнопку "Отправить данные" html-форма отправит значения сценарию action.php.

После этого в переменных $text и $msg будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST.

Соседние файлы в папке metoda