Web-программирование. 
Обработка HTML-форм

Web-программирование. Обработка HTML — форм

Лекция

Подготовлена Прохоровым В.С.

План

1. СОЗДАНИЕ HTML-ФОРМ

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

1.2. Тег FORM — контейнер форм

1.3. Тег INPUT и способы его использования

1.3.1. Однострочные поля ввода

1.3.2. Поле ввода пароля

1.3.3. Скрытое текстовое поле

1.3.4. Независимые переключатели

1.3.5. Зависимые переключатели

1.3.6. Загрузка файлов

1.3.7. Кнопка отправки формы

1.3.8. Кнопка сброса

1.3.9. Кнопка отправки с индивидуальным рисунком

1.4. Ввод многострочного текста. Тег TEXTAREA

1.5. Списки выбора. Тег SELECT

1.5.1. Списки с единственным выбором

1.5.2. Списки множественного выбора.

2. ПЕРЕДАЧА ДАННЫХ С ПОМОЩЬЮ ФОРМЫ

2.1. Форма для передачи данных

2.2. Трансляция полей формы

2.3. Трансляция переменных окружения

2.4. Работа с cookies

2.4.1. Пример приложения с cookies

2.5. Обработка списков с множественным выбором

2.6. Обработка массивов

2.7. Особенности обработки независимых переключателей

2.8. Диагностика создаваемых массивов

3. КАКОЙ РЕЖИМ ВЫБРАТЬ: register_globals=off & on ?

3.1. Первый пример уязвимости

3.2. Второй пример уязвимости

3.3. Порядок трансляции переменных

4. ПРИЛОЖЕНИЯ, ХРАНЯЩИЕ ДАННЫЕ О РЕГИСТРАЦИИ ПОЛЬЗОВАТЕЛЕЙ В БАЗЕ ДАННЫХ MySQL

5. ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ

ЗАКЛЮЧЕНИЕ

ЛИТЕРАТУРА

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

РНР облегчает задачу обработки и разбора форм, поступивших из браузера, так как в язык на самом нижнем уровне встроены все необходимые возможности. Поэтому программисту не приходится даже и задумываться над особенностями протокола HTTP и размышлять, как же происходит отправка и прием роsт-форм или даже загрузка файлов.

1. СОЗДАНИЕ HTML — ФОРМ

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

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

Форма в HTML-документе реализуется тегом-контейнером FORM, в котором задаются все управляющие элементы — поля ввода, кнопки и т. д. Если управляющие элементы указаны вне содержимого тега FORM, то они не создают форму, а используются для построения пользовательского интерфейса на WEB-странице, то есть для привнесения в нее различных кнопок, флажков, полей ввода. Обработка таких элементов производится индивидуально в рамках самого HTML-документа с помощью включенных в него скриптов. А могут вообще никак не обрабатываться. Например, управляющий элемент TEXTAREA часто используется для создания окна с полосой прокрутки внутри документа для вывода большого текста, который играет второстепенную роль. Обычно так отображаются тексты лицензионных соглашений, тексты больших комментариев или правила пользования данным WEB-ресурсом. Имена элементам формы присваиваются через их атрибут NAME. Каждый элемент формы имеет начальное, используемое по умолчанию, и конечное значения, которые являются символьными строками. Начальные значения элементов не меняются, благодаря чему может осуществляться сброс значений, указанных пользователем. Результатом этого действия будет установка всех управляющих элементов формы в своих первоначальных используемых по умолчанию значениях.

В HTML определены следующие типы управляющих элементов:

? Кнопки — задаются с помощью элементов BUTTON и INPUT. Различают:

_ кнопки отправки — при нажатии на них отправляются формы серверу;

_ кнопки сброса — при их нажатии устанавливают управляющие элементы в первоначальные значения;

_ прочие кнопки — кнопки, для которых не указано действие, выполняемое по умолчанию при их нажатии.

? Зависимые переключатели (переключатели с зависимой фиксацией) — задаются элементом INPUT и представляют собой переключатели «вклвыкл». Если несколько зависимых переключателей имеют одинаковые имена, то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение «вкл», то все остальные автоматически — в положение «выкл». Именно это и является преимуществом их использования.

? Независимые переключатели (переключатели с независимой фиксацией) — задаются элементом INPUT и представляют собой переключатели «вклвыкл», но в отличие от зависимых, независимые переключатели могут принимать и изменять свое значение независимо от остальных переключателей. Даже если последние имеют такое же имя.

? Меню — реализуется с помощью элементов SELECT, OPTGROUP и OPTION. Меню предоставляют список возможных вариантов выбора.

? Ввод текста — реализуется элементами INPUT, если вводится одна строка, и элементами TEXTAREA — если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.

? Выбор файлов — позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT.

? Скрытые управляющие элементы — создаются управляющим элементом INPUT.

1.2. Тег FORM — контейнер форм

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

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

? action — единственный обязательный атрибут. В качестве значения этого атрибута указывают URL-адрес запрашиваемой CGI-программы. Эта программа будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись MAILTO:URL, благодаря которой форма будет послана по электронной почте. Если атрибут ACTION все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная WEB-страница.

? method — определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD может принимать два значения: get или post.

? enctype — необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибута ENCTYPE:

? APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию).

? MULTIPART/FORM-DATA.

1.3. Тег INPUT и способы его использования

Тег INPUT позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и др. У INPUT нет конечного тега. Атрибуты и особенности использования INPUT зависят от способа его использования.

1.3.1. Однострочные поля ввода

Формат тега INPUT для создания поля ввода текстовой строки:

name=имя_параметра

[value=значение]

[size=paзмер]

[maxlen=длина]>

Тег создает поле ввода с максимально допустимой длиной текста maxlen и размером в size знакомест. Если задан атрибут value, то в поле будет изначально отображаться указанная строка. В квадратных скобках помечены необязательные атрибуты.

1.3.2. Поле ввода пароля

Пароль не должен отображаться на экране. Поле для ввода пароля:

name=имя_параметра

[value=значение]

[size=paзмер]

[maxlen=длина]>

Вводимая информация в поле не отображается, а заменяется «звездочками».

Не рекомендуется устанавливать значение value (значение по умолчанию) из соображений безопасности. В окне браузера данное значение не отображается, но стоит просмотреть исходный HTML-код, пароль будет виден «невооруженным глазом».

1.3.3. Скрытое текстовое поле

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

name=имя

value=значение

Такие поля передаются серверу, но на Web-странице не отображаются.

1.3.4. Независимые переключатели

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

name=имя

value=значение

[checked]

Если переключатель был включен на момент нажатия кнопки отправки данных, то сценарию будет передан параметр имя=значение. Если же флажок выключен, то сценарию вообще ничего не будет передано — как будто нашего переключателя вообще нет.

Переключатель может быть по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked.

Переключатель checkbox называется независимым, так как его состояние не зависит от состояния других переключателей checkbox. В одной форме может быть одновременно выбрано несколько переключателей

Листинг input.html. Тег input и способы его использования

<html>

<head>

<title>Тег input и способы его использования</</b>title>

В окне браузера форма выглядит следующим образом:

1.3.5. Зависимые переключатели

Если в форме присутствует несколько одноименных зависимых переключателей типа radio, то включен из них может быть только один. При выборе одного переключателя все одноименные зависимые переключатели автоматически выключаются. В качестве имени переключателей воспринимается значение атрибута name.

Листинг radio₁.html. Форма с зависимыми переключателями

<html>

<head>

<title>Зависимые переключатели</</b>title>

В окне браузера форма выглядит следующим образом:

Первый переключатель (со значением male) активен по умолчанию (установлен атрибут checked). Как только пользователь нажмет кнопку Передать, сценарию sex.php будет передан параметр sex (атрибут name обоих переключателей) со значением male. Если же пользователь выберет другой вариант (female), сценарию будет передано значение параметра sex.

1.3.6. Загрузка файлов

Тег INPUT позволяет создавать поле выбора файла для отправки. При этом формат тега таков:

<input type=file

name=имя

[vа1ue=имя файла] >

1.3.7. Кнопка отправки формы

Кнопка отправки служит для отправки сценарию введенных в форму значений. Синтаксис тега INPUT таков:

[name=go]

value=Передать

Атрибут value определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если же атрибут name для кнопки будет указан, то дополнительно к данным формы будет отправлена пара имя=значение от самой кнопки. Рекомендуется обязательно указывать этот атрибут.

1.3.8. Кнопка сброса

Кнопки reset сбрасывает форму — устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки облегчает очистку формы, если были введены неправильные параметры:

value=C6poc>

1.3.9. Кнопка отправки с индивидуальным рисунком

Можно использовать рисунок для отправки данных. При щелчке на этом рисунке произойдет то же, что и при нажатии на кнопку submit. Однако, кроме этого, сценарию будут переданы координаты места произведения щелчка на рисунке. Координаты будут переданы в формате: имя. х=коор_Х, имя. у=коор_У:

name=имя

src=рисунок>

Листинг cnopka_image.html. Кнопка отправки с рисунком

<html>

<head>

<title>Кнопка отправки с рисунком</</b>title>

В окне браузера форма выглядит следующим образом:

1.5. Списки выбора. Тег SELECT

1.5.1. Списки с единственным выбором

Список выбора позволяет выбрать один вариант из множества. Можно было бы использовать зависимые переключатели radio, но это не рационально. Например, если нужно, чтобы пользователь выбрал месяц, то один список будет занимать намного меньше места в окне браузера, чем целых двенадцать переключателей radio. Пример списка выбора, реализованного с помощью тега SELECT:

Листинг spisoc₁.html. Форма списка с единственным выбором

<html>

<head>

<title>Список с единственным выбором</</b>title>

ЯнварьФевральMapтАпрельMaйИюньИюльАвгустCeнтябрьOктябрьHоябрьДекабрь

</</b>body>

</</b>html>

В окне браузера форма выглядит следующим образом:

Варианты выбора задаются с помощью тегов option. При отправке формы сценарию будет отослано значение value выбранного элемента списка.

Атрибут name определяет имя параметра, который будет передан сценарию. Если атрибут size равен 1, то список будет выпадающим. В противном случае список будет занимать n строк и будет «оснащен» полосой прокрутки. Значение, выбранное в списке по умолчанию, можно указать с помощью атрибута selected для соответствующего тега option. В приведенном примере месяц по умолчанию — Май.

Атрибут value является необязательным. Если его не указать, то будет передана строка, заключенная в тег option. В нашем случае сценарию будет передан параметр month=Cентябрь (если value не указан).

1.5.2. Списки множественного выбора

С помощью тега SELECT можно создавать и списки множественного выбора. В таких списках можно выбрать не одно, а сразу несколько значений. Чтобы сделать список с множественным выбором, необходимо для тега SELECT указать атрибут multiple. Если пользователь выберет несколько вариантов, то сценарию будут переданы параметры в форме:

имя=значение&имя=значение. .. &имя=значение

Листинг spisoc_n.html. Форма списка множественного выбора

<html>

<head>

<title>Список множественного выбора</</b>title>

ЯнварьФевральMapтАпрельMaйИюньИюльАвгустCeнтябрьOктябрьHоябрьДекабрь

echo «Данные из командной строки: $_SERVER[QUERY_STRING]»;

?>

if ($_REQUEST['login']=="root" && $_REQUEST['password']=="Z10N0101″)

{

echo «Доступ открыт для пользователя $_REQUEST[login]»;

//Команда блокирования рабочей станции (работает в NT-системах)

system («rundll32.exe user32. dll, LockWorkStation»);

}

else

{

echo «Доступ закрыт!»;

}

?> ЯнварьФевральMapтАпрельMaйИюньИюльАвгустCeнтябрьOктябрьHоябрьДекабрь

После отправки формы параметры передаются так: name=value1&name=value2&name=value3…

Переменная $name = month2 будет содержать только последнее значение (value N).

Пусть выбрали Maй и Август. Тогда после отправки формы сценарию придет строка параметров month2 = Maй&month2 = Август, и в переменной $_REQUEST ['month2'] окажется, конечно, только Август.

Первый пункт (Maй) потерялся. Для решения подобных проблем в РНР предусмотрена возможность давать имена полям формы в виде «массива с индексами» month2[](квадратные скобки — это признак массива.):

ЯнварьФевральMapтАпрельMaйИюньИюльАвгустCeнтябрьOктябрьHоябрьДекабрь

Теперь сценарию придет строка month2[]= Maй&month2[]= Август.

Интерпретатор обнаружит, что мы хотим создать «автомассив», т. е. массив, который не содержит пропусков и у которого индексация начинается с нуля. Интерпретатор создаст запись $_REQUEST ['month2'] типа «массив», содержимое которого следующее: array (0=>" Maй «, l=>» Август «). Как мы видим, в результате ничего не пропало — данные только слегка видоизменились.

В результате мы получим в $_REQUEST массив массивов (или двумерный массив, как его еще называют).

Таким образом, множественный список преобразован в массив. Массив представляет собой индексированную совокупность переменных одного типа. Каждая переменная или элемент массива имеет свой индекс, т. е. все элементы массива последовательно пронумерованы.

Обход массива в цикле организуют (обрабатывают его элементы) с помощью цикла foreach. Принцип работы этого цикла прост: при проходе каждого элемента массива в переменную $key помещается индекс этого элемента, а в переменную $value — его значение.

Нам даже не нужно знать количество переданных элементов списка. Предварительно лишь нужно сообщить РНР, что мы будем передавать массив:

ЯнварьФевральMapтАпрельMaйИюньИюльАвгустCeнтябрьOктябрьHоябрьДекабрь

а1ue = «Нажмите кнопку, чтобы запустить сценарий! «>

Листинг hello2.php. Обработка списка с множественным выбором при включенной директиве register_globals

echo «г>Список month2:

" ;

foreach ($month2 as $key=>$value)

echo «$key = $value

";

?>

В окне браузера форма выглядит следующим образом:

Природа этой ошибки подробно будет рассмотрена в п. 3: «Какой режим выбрать: register_globals = off & on?». Здесь заметим лишь, что мы обратились к переменной $month2 как к глобальной, что требует наличия включенной директивы register_globals=on. Если эта директива отключена (register_globals=off), что настоятельно рекомендуется делать, то нужное значение можно получить через глобальный массив $_REQUEST['month2']. Поэтому сделаем необходимые исправления.

Листинг hello2.php. Обработка списка с множественным выбором при отключенной директиве register_globals

echo «Список month2:

" ;

foreach ($_REQUEST['month2'] as $key=>$value)

echo «$key = $value

";

?>

Прием с автомассивом в поле > для списка с множественным выбором выглядит довольно элегантно. Однако не стоит думать, что он применим только к этому элементу формы: автомассивы можно применять и в любых других полях. Вот пример, создающий два переключателя (кнопки со значениями вкл/выкл), один элемент ввода строки и одно текстовое (многострочное) поле, причем все данные после запуска сценария, обрабатывающего эту форму, будут представлены в виде одного-единственного автомассива: