6. Практические приемы создания форм в веб-страницах

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

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 >