Назначение и структура форм. Теги и атрибуты формы.

Html-форма – это специальное языковое средство, позволяющее поль­зо­вателю вводить информацию на веб-странице и передавать ее серверу.

Механизм работы с такой информацией следующий: 1). Пользователь вводит информацию в соответствующие поля формы (варианты ввода могут быть разные). 2). Браузер интерпретирует эту информацию и представляет в определенном виде для передачи серверу по сети. 3). Сервер принимает информацию и осуществляет ее обработку с по­мо­щью специальной программы – скрипта, или GGI- сценария, напи­сан­ного на языке Perl или C++( Common Gate Way Interface). В качестве про­грам­мы-обработчика также могут выступать программы, написанные на сер­вер­ном языке PHP. 4). Результат обработки возвращается через Web-сервер на соответствую­щую веб-страницу назад к пользователю, если в этом заключается его запрос, либо исполняется иное действие. В частности, это может быть от­правка заказа по адресу, предопределенному соответствующим html-доку­ментом (с php-вставками). В любом случае пользователь должен получить сообщение о реакции на свой запрос.

Таким образом, специфика работы с формами – это наличие обрат­ной связи. Способы интерактивного общения могут быть разные, например интернет-форум и чат. Чат, в отличие от форума, – это много­строчное сооб­­щение через интернет в реальном времени.

Формы также используются для авторизации пользователя на сайтах. Форма описывается парным тегом <form> и не может содержать другие формы внутри себя. Имеет следующие основные параметры:

- action – адрес (URL) серверной программы-обработчи­ка формы;

- method – способ отправки информации. По умолчанию имеет значе­ние get, однако рекомендуется использовать значение post. В последнем случае инфор­ма­ция будет конфидециальной, тогда как значение get делает ее открытой (передается как дополнение к URL, адресу отправки);

- name, для присвоения данной веб-форме. Этот параметр удобен для идентификации формы, но не явлется обязательным.

- enctype, для указания типа кодирования данных. По умолчанию дей­ствует универсальный тип urlencoded. Другие типы, например multipart, ипользу­ются редко.

На практике из основных параметров в форме отражают обычно только два из основных параметров: action и method.

Для описания форм помимо основных параметров используются и дополнительные параметры, которые оказывают влияние на их внешнее оформле­ние. За это отвечают теги <input>, <textarea>, <select>.

Непарный тег <input> используется для создания поля ввода в виде текстовой строки, которая может иметь разновид­ности в зависимости от значения параметра type: - Простая текстовая строка ( <input> type = “text”…>); - Поле ввода пароля ( <input> type= “password”…>); - Элемент для установки флажка выбора (<input> type= “checkbox”…>); - Элемент для установки переключателя (<input> type= “radio”…>); - Элемент в виде стандартной кнопки отправки содержимого формы (<input> type= “radio”…>); - Элемент в виде нестандартной (графической) кнопки отправки (<input> type= “image”…>); - Элемент в виде кнопки сброса содержимого всех полей формы (<input> type= “reset”…>); - Скрытое поле, отсылаемое неотображаемое значение, установленное параметром value (<input> type= “hidden”…>).

Для тега input в отдельных случаях применяют параметры: - name – название объекта (строки, кнопки и т.п.); - value – отображение названия поля выбора, кнопки выбора, поля пере­клю­­ча­­теля, кнопки отправки, кнопки сброса; size – размер поля ввода (в символах); maxlength – предельное число вводимых символов ( по умолчанию нет ограничений); checked– фиксация флажка ( установка по умолчанию).

Тег <textarea> в отличие от тега <input> предоставляет возможность вводить многострочное поле в виде строк и столбцов, количество которых указывается с помощью атрибутов rows, числа строк текстового поля, и cols, числа столбцов, если они есть. Возможно использование атрибута name как оглавления внутри текстового поля. Обычно тег <textarea> при­меняют для ввода комментария.

В случаях, когда в форму нужно вводить большое число данных, применение тега <input> приводит к неоптимальному размещению текста на веб-странице. Оформление формы в виде списка, с использованием парного тега <select> – более компактно. Он имеет параметры: name – имя для идентификации списка обработчиком; size – количество видимых эле­мен­­тов списка; multiple – разрешает выбор сразу нескольких позиций в списке, с указанием их числа. Элементы списка оформляют с использованием непарного тега <option> с обязательным параметром value, который необходим для обра­ботки результатов выбора обработчиком. Параметр selected определяет выбор из списка по умолчанию. Если параметр size не задан, то вместо многострочного меню будет виден только первый элемент списка. Для списка всегда действует вертикальная прокрутка.

Пример1. Формат обычного списка.

<select name = “…” size = “5”> <option value = “…” selected > элемент 1 <option value = “…” > элемент 2 ………………………………….. элемент i <option value = “…” > элемент 5 </selected >

Пример2. Формат списка с множественным выбором.

<select name = “…” size = “5” multiple =2 > <option value = “…” selected > элемент 1 <option value = “…” > элемент 2 ………………………………….. элемент i <option value = “…” > элемент 5 </selected >

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).