Практическая работа № 4 Формы в html-документах

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

Введение

Формы используются при создании интерактивных страниц, позволяющих осуществлять передачу данных, вводимых пользователем в браузере, на Web-сервер. Формы используются для организации опросов, заполнения анкет, тестирования и т.д. Кроме того с помощью сценариев (скриптов), например JavaScript, форма позволяет получить доступ к любому элементу HTML-документа и изменять его и применять по своему усмотрению.

Форма отображается в окне браузера в виде набора стандартных элементов управления – полей ввода данных и кнопок.

По команде пользователя браузер собирает введенную информацию, форматирует ее и передает на сервер. На стороне Web-сервера обработку полученной от клиента информации выполняет специальная программа-обработчик. Таким образом, формы являются способом обмена данными между браузером и Web-сервером.

1. Формы в html-документах

В HTML-документе форма открывается тегом <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. В каждый момент времени на Web-сервер могут быть отправлены данные только одной формы. Поэтому данные разных форм должны быть независимы друг от друга.

Формы передают информацию серверным программам-обработчикам в виде пар

[имя переменной]=[значение переменной].

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

Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

1.1. Элементы форм

Синтаксис тега <FORM> имеет вид:

<FORM NAME="MyName" ACTION="url" METHOD="POST"> ... </FORM>

Атрибуты тега FORM:

NAME – определяет имя формы, уникальное для данного документа. Используется только, если в документе присутствует несколько форм.

ACTION=url

где url- адресWeb-сервера и программы, которая будет обрабатывать данные формы. Если это поле отсутствует, будет использован URL адрес текущего документа. Допустимо использовать значениеMAILTO:url для отправки данных по электронной почте.

METHOD=get/post

где get/post– метод, определяющий способ передачи данных формы протоколом HTTP. Метод GETможет использоваться для передачи коротких сообщений.Браузер при этом берёт значение action формы, добавляет `?', затем присоединяет набор данных формы, разделенных символом амперсанда (&), и направляет полученную строку на указанный URL. Информация передается в явном виде. Например, если в строке набора браузера присутствует http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В формахHTML-документов этот метод обычно не используется, так как допускает простой перехват отсылаемых на сервер данных.

Метод POSTсоздан специально для передачи текстовых сообщений. Этот метод пересылается данные формы как содержимое телаHTTP-запроса. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE=

задает тип кодирования содержимого заполненной формы. Этот атрибут действует только для метод POST и имеет только одно возможное значение (которое является значением по умолчанию) - application/x-www-form-urlencoded.

TARGET=window

Определяет положение ответа сервера по получению формы (по аналогии с тегом <A>)

Значения параметра window:

window	имя окна, в котором будет выведен результат, если указанное имя отсутствует, то результат будет показан в новом окне;
_blank	показать результат в новом окне;
_parent	показать результат в родительском окне;
_self	показать результат в том же окне;
_top	показать результат в основном окне.

В теле тега FORM могут использоваться любые другие теги за исключением другого тега <FORM>. Обычно в теле задаются управляющие элементы — поля ввода, флажки, кнопки и т.д. Если управляющие элементы указаны вне содержимого тега FORM, то они не создают форму, а используются для построения пользовательского интерфейса на Web-странице. Обработка таких элементов производится индивидуально в рамках самого HTML-документа с помощью включенных в него скриптов, либо вообще никак не обрабатываться. Например, тег TEXTAREA часто используется для создания окна с полосой прокрутки для вывода большого текста. Обычно так отображаются тексты лицензионных соглашений, тексты больших комментариев или правила пользования данным Web-ресурсом.

Для создания интерфейсных элементов в теле тега FORM используются элементы INPUT, SELECT, и TEXTAREA. Каждый элемент формы имеет начальное, используемое по умолчанию, и конечное значения, которые являются символьными строками. Начальные значения элементов не меняются, благодаря чему может легко осуществляться сброс значений, указанных пользователем.