6.2. Практические задания по теме: задания 6-1…6-5

Задание 6-1.

Подготовить бланк заказа товара, который можно будет вызывать из любой веб-страницы (из 4-х), открываемой из меню главной страницы . Для ввода необходимых данных заказчиком (клиентом)из интернета в блан­ке заказа создать форму, пользуясь шаблоном.

<form name = “наименование формы” method = “post” action = “http:// путь к файлу и имя файла для обработки запроса” > <p> надпись для поля ввода <input name = “ имя переменной” type = “text” size = “150” maxlength = “40”> </p> </form>

1). В папке Praktika6 открыть текстовый файл bmt6.txt с описанием порядка заказа продукции и сохранить как файл bmt6-1.html.

2) В том же документе дописать форму со следующими параметрами. Имя формы – “form-zakaz”, метод – post, action = “http//localhost/ klient_z.php”. Сохранить результат как файл bmt6-2.html.

Здесь в качестве адреса сервера и серверной программы заданы localhost – сервер, который можно создать на своем компьютере, и klient_z.php –про­грамма обработки запроса, написанная с использованием языка php, ее копия хранится в папке Prakt6.

3). Ввести в форму строки: <p><strong>Фамилия, Имя, Отчество</strong><br /> <input name="Fio" type="text" size="150" maxlength="40" ></p>.

Сохранить результат и попрактиковаться в заполнении формы (пока на примере однострочного поля ввода).

Задание 6-2

1). В документе bmt6-2.html дополнить форму строками ввода адреса клиента, почтового индекса, номера телефона,адреса электронной почты.

Принять следующие значения атрибута name для соответствующих строк формы: name = “Adr”, name = “Ind”, name = “Tel”, name = “Epo”. Сохранить результат как файл bmt6-3.html и проверить заполнение формы.

2). Убедиться в том, что после заполнения строк формы и последую­щем нажатии <Enter> результат их заполнения не сохраняется и обработка формы не происходит (браузер сообщает, что искомый сервер не найден). Это объясняется тем, что на компьютере отсутствует сервер localhost. Если его создать, то по результату обработки формы, клиент получит сообщение о состоянии своего заказа, например, о том, что заказ принят.

В реальных условиях работы, когда сайт, с которого делается запрос (например, в виде заказа товара), зарегистрирован в сети интернет и обслу­живается специальной службой –хостингом, вместо localhost в форме указывают адрес соответствующего сервера, обработчика запроса.

Задание 6-3

1). Добавить в ту же форму документа bmt6-3.html несколько дополнитель­ных полей ввода груп­пы типа переключатель type = “radio” для выбора типа доставки товара. Значение параметра name должно быть одинаковое, name = “Dost”. Для каждого поля <input> переключателя ввести разные значения атри­бута value: value = “Самовывоз” и “Курьером”.

Для установки вида доставки в по умолчанию ввести атрибут checked = “checked” для самовывоза. Оформить поля ввода табличным способом. Сохранить результат как файл bmt6-4.html и проверить в браузере запол­нение формы.

(<p>Выберите нужный Вам вид доставки (по умолчанию выбрана доставка самовывоз) </p>

<p> <strong> Вид доставки </strong></p>

<table width ="200"> <tr> <td> <input name ="Dost" type ="radio" value="Cамовывоз" checked="checked"/>Cамовывоз <input type="radio" name="Dost" value="Курьером" Курьером/> Курьером </td> </tr> </table>)

Задание 6-4

1). В документе bmt6-4.html дополнить форму многострочным полем (type = textarea name =” Prim”) для последующего ввода комментария. Ука­зать число строк (rows=”5”) и столбцов (cols=”150”). Сохранить резуль­тат как файл bmt6-5.html и проверить в браузере заполнение формы.

( <p> <textarea name = "Pri" cols ="150" rows = "5"> </textarea> </p> )

Рис.6-1. Веб-страница документа bmt6-6. html

Задание 6-5

1). В документе bmt6-5.html дополнить форму полем ввода с кнопкой для отправки формы ( параметр type = submit). Щелчок мыши по этой кно­п­ке реализует переход по адресу, указанному параметром action. Устано­вить атрибут value = “ЗАКАЗАТЬ!”.

Сохранить результат как файл bmt6-6.html и просмотреть его в бра­узере. Убедиться в том, что щелчок по кнопке отправки формы (в дан­ном случае кнопка содержит надпись «ЗАКАЗАТЬ!») приводит к попытке поиска заданного адреса. Отправка и обработка формы возможна только при реальном адресе (см. задание 6-2, п.2).