HTML_forms (Методические материалы к лабораторным работам 1, 2)

9

Лекция №5. Формы.

HTML-формы предназначены для передачи данных, вводимых пользователем, обработчику на стороне веб-сервера.

Элементы создания форм.

Элемент FORM

Элемент FORM служит контейнером для элементов управления формы.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов:

1. action = uri

Задает сценарий на веб-сервере, который является обработчиком формы (сценарий CGI, ASP, PHP и т.д.) (IE5: Если атрибут не задан, форма отправляется сама себе.)

2. method = get (по умолчанию) |post

Определяет метод HTTP, используемый для передачи данных формы на сервер.

При использовании метода HTTP "get" данные формы добавляются к URI, указанному в атрибуте action. При использовании метода HTTP "post" данные формы включаются в тело HTTP-запроса.

3. target = “имя фрейма”

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

4. enctype = application/x-www-form-urlencoded (по умолчанию) | multipart/form-data

Атрибут задает тип содержимого, используемый для отправки формы на сервер с помощью метода POST.

В формате application/x-www-form-urlencoded передаются «обычные» формы. Параметры передаются в виде имя=значение.

В формате multipart/form-data передаются «сложные» формы, которые включают в себя содержимое файлов.

5. accept-charset = кодировка данных формы

Можно явно указать сценарию на сервере, в какой кодировке передаются данные. Например:

accept-charset = “Windows-1251”

Элемент INPUT

Определяет управляющий элемент формы.

Начальный тег: обязателен, Конечный тег: не обязателен

Определения атрибутов:

1. name = имя элемента управления

2. value = значение по умолчанию

3. type = text|password|checkbox|radio|submit|reset|image|button|hidden|file

Определяет тип управляющего элемента. По умолчанию используется значение "text".

Типы элементов:

text

Создает элемент для ввода текста из одной строки.

password

Аналогичен значению "text", но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек).

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

checkbox - флажок

radio - определяет кнопку с зависимой фиксацией. (радиокнопку).

Радиокнопки объединены в группу, если у них одинаково значение атрибута name. В этом случае возможен выбор только одной радиокнопки из группы.

submit

Создает кнопку отправки. При нажатии этой кнопки форма отправляется на сервер.

reset

Создает кпопку очистки формы.

image

Создает графическую кнопку отправки.

button

Создает кнопку. В качестве метки на кнопке отображается значение атрибута value. Действия, происходящие при нажатии определяются обработчиком события onClick.

hidden

Создает скрытое поле. С помощью такого поля можно, например, передавать на сервер SessionID (если нежелательно использование Cookies).

file

Создает управляющий элемент для выбора файла. При использовании метода GET на сервер передается только имя файла. Для того, чтобы передать на сервер содержимое файла необходимо использовать метод POST с атрибутом enctype=multipart/form-data.

В этом случае серверный сценарий должен разобрать сообщение, пришедшее в формате multipart/form-data, и выделить из него пришедший файл.

4. size = ширина элемента

Для "text", "password" и "file" задает ширину поля в символах.

5. maxlength = максимальное число вводимых символов (для "text" и "password").

6. checked (логический)

Для "radio" и "checkbox" означает, что флажок установлен.

7. src = uri

Для "image" определяет файл изображения, используемый для представления графической кнопки. В этом случае возможно также использование атрибутов height, width. При использовании атрибута ismap на сервер передаются координаты щелчка.

8. DISABLED (логический)

Делает элемент недоступным для получения фокуса.

9. READONLY (логический)

Делает элемент недоступным для редактирования.

10. tabindex = номер при переходе по TAB (целое число большее 0)

Переход производится от элементов с меньшим значением атрибута tabindex до элементов с большим значением. Значения не обязательно должны быть последовательными и не обязательно должны начинаться с какого-то конкретного значения.

11. accesskey = горячая клавиша для данного элемента (1 символ)

Возможно использование цифр и латинских букв (еще?). Для перехода к данному элементу необходимо нажать ALT+горячая клавиша. (осторожнее, чтобы не совпадало с горячими клавишами для пунктов меню)

Элемент BUTTON

Кнопки, создаваемые с помощью элемента BUTTON, действуют так же, как и кнопки, создаваемые с помощью элемента INPUT, но в качестве содержимого кнопки BUTTON может выступать не только текст или только изображение, а большинство визуальных элементов HTML: текст, изображения, таблицы, плавающие фреймы и т.д. (Активные элементы, например гиперссылки, перестают быть активными).

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

1. name = имя кнопки

2. value = значение (реально не используется).

3. type = submit|reset|button

Объявляет тип кнопки. Возможные значения:

• submit: Создает кнопку отправки. Это значение используется по умолчанию.

• reset: Создает кнопку очистки формы.

• button: Создает кнопку.

Возможно также использование атрибутов disabled, accesskey, tabindex.

Элемент TEXTAREA

Определяет текстовое поле из нескольких строк.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

1. name = имя поля

2. rows = количество строк текста

3. cols = ширина текста в символах

Параметры rows и cols задаются по умолчанию. Если вводимый текст не умещается, то возникают полосы прокрутки.

Возможно также использование атрибутов readonly, disabled, tabindex, accesskey

Содержимое элемента задает текст по умолчанию.

При передаче текста на сервер строки разделяются символами 10 13 - %0D%0A.

Элемент LABEL

Содержимое элемента LABEL задает метку (текстовую подпись) для элемента управления.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов:

for = имя элемента управления (значение атрибута name или атрибута id)

Связывание метки через атрибут for называется явным связыванием.

Чтобы связать метку с элементом управления, элемент управления можно поместить в элемент LABEL (неявное связывание).

Создание списков и выпадающих списков

Для создания списков используются элементы SELECT и OPTION

Элемент SELECT

Элемент SELECT создает список. Элементы списка определяются с помощью элементов OPTION. Элемент SELECT должен содержать хотя бы один элемент OPTION.

SELECT

|

|- OPTION

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента SELECT:

1. name = имя элемента

2. multiple (логический)

Если атрибут установлен, то возможен выбор нескольких элементов списка. Если он не установлен, то возможен выбор только одного элемента.

3. size = Число отображаемых элементов списка

Определяет высоту списка в элементах. Если size=1 список автоматически превращается в выпадающий список (если не установлен атрибут multiple).

Возможно также использование атрибутов disabled, tabindex, accesskey

Элемент OPTION

Определяет элемент списка.

Начальный тег: обязателен, Конечный тег: не обязятелен

Определения атрибутов элемента OPTION:

1. selected (логический)

Если этот атрибут установлен, то элемент списка является выбранным по умолчанию.

2. value = значение элемента, передаваемое на сервер

Если этот атрибут не установлен, на сервер передается содержимое элемента OPTION.

В качестве элемента списка отображается содержимое элемента OPTION, а на сервер передается содержимое атрибута value.

Добавление структуры: элементы FIELDSET и LEGEND

Элемент FIELDSET позволяет осуществлять группировку полей формы. Группируемые элементы являются содержимым элемента FIELDSET.

Элемент LEGEND позволяет определить заголовок (легенду) для элемента FIELDSET. Содержимое элемента LEGEND является заголовком.

Для обоих элементов начальный тег: обязателен, Конечный тег: обязателен.

Определения атрибутов элемента LEGEND:

1. align = left(по умолчанию)|center|right

Определяет выравнивание легенды.

Возможно вложенное использование элемента FIELDSET.

Отправка формы на сервер.

Отправку содержимого формы на сервер броузер осуществляет в 4 этапа:

1. Определение успешных элементов управления

Успешным называется элемент управления, который "подходит" для отправки. Каждый успешный элемент имеет имя и текущее значение; эта пара является частью передаваемого набора данных формы. Успешный управляющий элемент находится внутри элемента FORM и имеет имя, задаваемое атрибутом NAME.

Правила определения «успешности» элементов:

• Отключенные элементы (с установленным атрибутом disabled) и кнопки сброса «reset» не являются успешными.

• Если в форме содержится несколько кнопок отправки, успешной является только активизированная кнопка. (Только ее содержимое передается на сервер. В данном случае, если пользователь нажмет на графическую кнопку отправки, то координаты щелчка будут переданы на сервер, а если на кнопку “submit”, то не будут.)

• Успешными являются все "включенные" флажки.

• Для кнопок с зависимой фиксацией (радиокнопок) с одним и тем же значением атрибута name, успешной является только "включенная" кнопка.

• Для списка имя элемента управления задается элементом SELECT, а значения - элементами OPTION. Успешными являются только выбранные пункты.

• Текущим значением элемента выбора файлов является имя выбранного файла. Содержимое файла передается на сервер только при отправке методом POST.

2. Построение набора данных формы

Набор данных формы - это последовательность пар имя=значение, составляемых из успешных элементов

3. Кодирование набора данных

Набор данных формы кодируется в соответствии с типом содержимого, определяемого атрибутом enctype элемента FORM.

4. Передача закодированного набора данных

Данные передаются на сервер как параметры серверного сценария, который задается атрибутом action.

Если для атрибута method установлено значение "get", то броузер формирует URI следующим образом: добавляет к значению атрибута action символ «?», затем добавляет набор данных формы, закодированный как “application/x-www-form-urlencoded” (в виде имя=значение). Затем броузер осуществляет переход на данный URI.

Если для атрибута method установлено значение "post", то броузер формирует запрос HTTP, и в теле запроса помещает набор данных формы, закодированный в соответствии с атрибутом enctype. (параметры передаются в виде имя=значение - “application/x-www-form-urlencoded” или в более сложном формате – “multipart/form-data”).

Пример URI:

http://somesite.com/script.asp?

login=user1

&pass=123

&chb=on

&comp=P4

&Hname=Hvalue

&File1=C%3A%5Cautoexec.bat

&button2=%D2%E5%EA%F1%F2%3CBR%3E%3CIMG+alt%3D%22%C8%E7%EE%E1%F0%E0%E6%E5%ED%E8%E5+%ED%E0+%EA%ED%EE%EF%EA%E5%22+src%3D%22image.gif%22%3E%3CBR%3E%D2%E5%EA%F1%F2

&text1=%CF%E5%F0%E2%E0%FF+%F1%F2%F0%EE%EA%E0.%0D%0A%C2%F2%EE%F0%E0%FF+%F1%F2%F0%EE%EA%E0.%0D%0A

&comp_select=P3

&comp_select=P4

&comp_combobox=P4

&imgsubmit.x=10

&imgsubmit.y=15