Значения от и до в форме html. Формы в HTML-документах. I. Ввод данных вручную

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

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

Имена элементам формы присваиваются через их атрибут NAME .

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

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

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

» кнопки отправки - при нажатии на них, они осуществляют отправку формы серверу;

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

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

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


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


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


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


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


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

Как видите, очень много элементов задаются с помощью универсального тега INPUT .

Полную спецификацию по HTML4 Вы можете найти

Тег FORM - контейнер форм

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

Приведем атрибуты тега FORM :

• action - единственный обязательный атрибут. В качестве его значения указывается URL-адрес запрашиваемого скрипта, которая будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись mailto:URL , благодаря которой форма будет послана по электронной почте. Если атрибут ACTION все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная веб-страница;


• method - определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD может принимать два значения: GET и POST ;


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

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

MULTIPART/FORM-DATA.

Тег INPUT и его методы

Элемент INPUT является наиболее употребительным тегом HTML-форм. С помощью этого тега реализуются основные функции формы. Он позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и.т.д.

Обратите внимание на особенность INPUT - у него нет конечного (завершающего) тега. Атрибуты и особенности использования INPUT зависят от способа его использования. Рассмотрим эти способы.

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

Наиболее часто используются поля ввода - ведь даже кнопка является полем ввода информации. Начнем с поля ввода текстовой информации. Формат тега INPUT для создания поля ввода текстовой строки:

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

Вот пример однострочного поля ввода:

» Поля ввода пароля

Конечно, имя пользователя можно ввести с помощью обыкновенного текстового поля. А вот пароль не должен отображаться на экране при его вводе. В этом нам поможет поле ввода пароля:

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

Вот пример поля ввода пароля:

» Скрытое текстовое поле

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

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

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

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

Реализовать это можно опять же с помощью тега INPUT . Для этого только необходимо в качестве значения атрибута type указать chechbox .

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

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

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

Приведем пример независимых переключателей:

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

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

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

Да
Нет

Данная форма будет выглядеть так:

Первый переключатель (со значением yes ) активен по умолчанию (мы установили атрибут checked ).

Как только пользователь нажмет кнопку "Отправить", скрипту script.php будет передан параметр answer (атрибут name обоих переключателей) со значением yes или no (в зависимости от того, какой вариант выбрал пользователь).

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

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

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

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

» Кнопка сброса параметров

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

» Кнопка отправки с рисунком

Вместо кнопки submit можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit . Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X , y=коор_Y . Синтаксис кнопки отправки с рисунком:

Многострочные текстовые поля. Тег TEXTAREA

В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA . Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA :

<br>текст по умолчанию<br>

Несколько значений относительно использования атрибутов: необязательные параметры cols и rows желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap определяет тип переноса текста, как будет выглядеть текст в поле ввода:

• Virtual - справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER ;
• Physical - этот тип зависит от типа браузера и выглядит по-разному;
• None - текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.

Следует заметить, что наиболее удобным является тип Virtual . Вот пример многострочного текстового поля с использованием атрибуту wrap=Virtual .

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:

for = "yes" > Да Нет >

Да Нет >

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:

Login: type = "text" name = "login" placeholder = "Введите ваш логин" >

Password: type = "password" name = "password" placeholder = "Введите ваш пароль" >
Далее

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

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

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

HTML. Формы и их атрибуты

Элементы форм знакомы всем пользователям современной глобальной сети. Это поля ввода текста и пароля, стандартные кнопки, радиокнопки-переключатели, «флажки», выпадающие списки и т.д. Наиболее очевидные варианты применения: ввод ключевых слов в поисковых системах, работа с электронной почтой через веб-интерфейс, регистрация на сайте, веб-анкеты, online-тесты. Сразу заметим, что использование форм предполагает интерактивность и, следовательно, обеспечение функциональности неизбежно связано с программированием (клиентским или серверным). Пожалуй, в большинстве случаев формы используются для передачи данных на сервер, однако и на стороне клиента есть задачи, в которых удобно применение форм (например, календарь или калькулятор).

Роль HTML состоит в описании необходимых элементов и компоновке их на странице. Все атрибуты форм и их элементов, описанных с помощью HTML, транслируются в соответствующие свойства объектов DOM и используются при создании сценариев JavaScript.

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

атрибут	описание	возможные значения
name	имя
action	адрес файла серверного сценария, который будет обрабатывать заполненную и переданную форму
method	метод передачи данных серверу	get post
enctype	тип содержимого, используемый для отправки формы на сервер	multipart/form-data
accept-charset	список кодировок символов ввода данных, которые будут обрабатываться сервером
target
onSubmit	сценарий JavaScript, выполняемый перед отправкой данных формы на сервер
onReset	сценарий JavaScript, выполняемый при сбросе значений элементов формы в значения по умолчанию

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

Все вышеперечисленные атрибуты формально необязательны, однако

• при работе на стороне клиента необходимо задавать имя формы name , чтобы иметь возможность обращаться к элементам формы из сценария JavaScript;
• отправка данных формы на сервер требует, как минимум, указания атрибута action , определяющего серверный сценарий обработки.

Смысл, по крайней мере, двух атрибутов необходимо пояснить более подробно.

Атрибут method

Атрибут method имеет два основных возможных значения: get (по умолчанию) и post.

Смысл этих значений следующий. При передаче данных методом get данные формы отправляются на сервер в заголовке запроса, а при использовании метода post – в теле запроса. Передача текстовых данных может осуществляться любым из этих методов. А вот бинарные данные могут быть отправлены только методом post. Это происходит в случае загрузки файла не сервер (всем понятный пример – приложение к электронному письму). Кстати, в этом случае необходимо указать enctype=”multipart/form-data” (см. далее примечения к атрибуту enctype).

Итак, за исключением случая передачи бинарных данных, равным образом можно применять оба возможных метода. На сложность разработки серверного сценария, принимающего данные из формы, это никоим образом не влияет. Какой же метод предпочтителен? Имеет смысл внимательно рассмотреть имеющиеся в сети ресурсы и убедиться, что в подавляющем большинстве случаев применяется метод get (например, в поисковых системах). Можно ли считать это негласным эмпирическим правилом? Для ответа на этот вопрос следует сравнить методы get и post по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя.

1. Необходимо учитывать, что максимальный объем данных, передаваемых методом get , ограничен, в зависимости от настроек протокола, и в любом случае не может превышать 8192 Кб.
2. Передача конфиденциальной информации методом get, несомненно, представляет определенную угрозу безопасности, так как get-строка остается в журналах всех промежуточных серверов и прокси-сервера.
3. С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса.

При передаче методом get пользователь имеет удовольствие видеть данные формы в адресной строке. Символы, отличные от стандартной латиницы кодируются. Например, пробелу соответствует код %20 . Каждый из нас постоянно наблюдает такую ситуацию, работая с поисковыми системами. Зададим, например в Яndex ключевое словосочетание «язык HTML » и увидим в адресной строке:

Слово «язык » закодировано последовательностью %FF%E7%FB%EA, а «HTML» передается как есть. Получив такой запрос, соответствующая серверная программа обратится к базе данных и, в конечном счете, сгенерирует и отправит браузеру список результатов поиска. Приятно ли смотреть на такую адресную строку? Нет. Зато пользователь может сохранить уникальную закладку на сгенерированную страницу.

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

Резюме. По-видимому, в большинстве типичных задач следует выбирать заданный по умолчанию метод get во всех случаях, кроме передачи на сервер:

• бинарных данных,
• конфиденциальной информации,
• данных большого объема.

Атрибут enctype

Этот атрибут имеет два возможных значения:

• application/x-www-form-urlencoded (по умолчанию)
• multipart/form-data

Первое значение используется в абсолютном большинстве случаев. Нет смысла указывать его явно – оно и так предполагается по умолчанию. Второй же тип кодировки (multipart/form-data ) указывается в единственном случае: при загрузке на сервер бинарного файла. При этом обязательно задание атрибута method=”post” .

Подготовлена Чуйковым А.С.

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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=имя_параметра

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

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

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

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

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

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

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

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

value=значение

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

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

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

value=значение

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

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

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

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

Текстовое поле ввода имени (login):

Поле ввода пароля (password):

Скрытое поле hid

checked>Bapиaнт 1 (по умолчанию)

Вариант 2

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

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

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

value=Передать

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

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

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

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

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

value=Передать

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

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

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

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

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

src=рисунок>

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

Текстовое поле txt

Поле ввода пароля pswd

Скрытое поле hid

checked>Bapиaнт 1 (по умолчанию)

Вариант 2

src=”image.png”>

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

Когда пользователь щёлкает в каком-либо месте изображения, соответствующая форма передаётся на сервер с двумя дополнительными переменными: sub_x и sub_y. Они содержат координаты щелчка.

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

В HTML многострочное поле ввода реализуется с помощью тега TEXTAREA. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько. Формат тега TEXTAREA таков:

[со1s=ширина в символах]

wrap=тип_переноса

>Текст по умолчанию

Необязательные параметры cols и rows желательно указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrapопределяет, как будет выглядеть текст в поле ввода:

● Virtual - справа от текстового поля выводится полоска прокрутки.

Вводимый пользователем текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши Enter.

● Physical - этот тип зависит от браузера и в разных браузерах может вести себя по-разному.

● None - текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не умещается в одну строку, появляется горизонтальная полоска прокрутки.

Стоит заметить, что наиболее удобным является тип Virtual.

Внешний вид поля:

name=”t_area”

wrap=»virtual»

>Текст по умолчанию

Листинг textarea.html. Форма с многострочным текстом

name=”t_area”

wrap=»virtual»

>Текст по умолчанию

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

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

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

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

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

Mapт

Maй

Ceнтябрь

Oктябрь

Hоябрь

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

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

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

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

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

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

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

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

Mapт

Maй

Ceнтябрь

Oктябрь

Hоябрь

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

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

Рассмотрим пример посылки сообщения из формы по электронной почте.

Листинг e_mail.html. Посылка сообщения из формы по e-mail

Нажмите “Cброс” и заполните заказ.

Если поместить этот код в HTML-программу, то на гипертекстовой старичке возникнет картинка:

Пользователь нажимает кнопку «Сброс», и поля принимают значения, установленные по умолчанию. Форма заполняется пользователем, и по нажатию кнопки «Послать заказ»отправляется по адресу myaddres@mail. Обычно браузер не сам отсылает форму, а поручает эту работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook). Письмо посылается в виде:

subjct: Форма отправлена из Microsoft Internet Explorer

name = Прохоров Виктор Сергеевич

value=prohwik@mail

obj = «Методические указания»

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

Можно написать простейший сценарий на РНР типа «Hello, world: сейчас 10 часов утра».

Однако этим сценариям недостает одного - интерактивного взаимодействия с пользователем.

Поставим задачу написать сценарий, который принимает в параметрах две величины: зарегистрированное имя и пароль пользователя. Если зарегистрированное имя равно root, а пароль - Z10N0101, следует напечатать: «Доступ открыт для пользователя <имя>» и заблокировать сервер (т. е. вывести стандартный экран Windows «Блокировка» с запросом пароля для разблокирования). Если же данные неверны, необходимо вывести сообщение «Доступ закрыт!».

Сначала рассмотрим наиболее простой способ передачи параметров сценарию - непосредственный набор их в URL после знака? - например, в форматеlogin=имя&password=napoль.

Пусть на сервере в корневом каталоге есть сценарий на РНР под названием hello.php. Этот сценарий распознает 2 параметра: login и password.

Поэтому, если задать в адресной строке браузера:

localhost/heIlo.php?login=root&password=Z10N0101

то должны получить требуемый результат.

Задача поставлена, можно приступать к ее решению. Но прежде полезно решить аналогичную, но более простую задачу.

Как же нам в сценарии получить строку параметров, переданную после знака вопроса в URL при обращении к сценарию? Для этого можно проанализировать переменную окруженияQUERY_STRING, которая в РНР доступна под именем $_SERVER.

Напишем пример, чтобы это проиллюстрировать (листинг qs.php).

Листинг qs.php. Вывод параметров командной строки.

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

Если теперь запустить этот сценарий из браузера (перед этим сохранив его в файле test.php в корневом каталоге сервера) таким образом:

localhost/qs.php?this+is+the+world/

то получим документ следующего содержания: Данные из командной строки: this+is+the+world

Обратите внимание на то, что URL-декодирование символов не произошло: строка $_server [" query_string "], как и одноименная переменная окружения, всегда приходит в той же самой форме, в какой она была послана браузером.

Так как РНР изначально создавался именно как язык для Web-программирования, то он дополнительно проводит некоторую работу с переменной query_string перед передачей управления сценарию. А именно, он разбивает ее по пробельным символам (в примере пробелов нет, их заменяют символы +, но эти символы РНР также понимает правильно) и помещает полученные кусочки в массив-список $argv, который впоследствии может быть проанализирован в программе.

Массив $argv используется при программировании на РНР крайне редко, что связано с большими возможностями интерпретатора по разбору данных, поступивших от пользователя. Однако в некоторых (учебных) ситуациях его применение оправдано.

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

Вернемся к поставленной задаче. Как сделать, чтобы пользователь мог в удобной форме ввести зарегистрированное имя и пароль? Очевидно, придется создать что-нибудь типа диалогового окна Windows, только в браузере. Для этого понадобится HTML-документ (например, form.html в корневом каталоге) с элементами этого диалога - текстовыми полями - и кнопкой.

Листинг form.html. Страница с формой

Имя:

Пароль:

Загрузим документ в браузер. Теперь, если заполнить поля ввода и нажать кнопку, браузер обратится к сценарию hello.php и передаст через? все атрибуты, расположенные внутри тегов в форме и разделенные символом & в строке параметров. Заметьте, что в атрибуте action тега задан относительный путь, т. е. сценарий hello.php будет искаться браузером в том же самом каталоге, что и файл form.html.

Все перекодирования и преобразования, которые нужны для URL-кодирования данных, осуществляются браузером автоматически. В частности, буквы кириллицы превратятся в%хх, где хх - некоторое шестнадцатеричное число, обозначающее код символа.

Использование форм позволяет не обременять пользователя такой информацией, как имя сценария, его параметры и т. д. Он всегда будет иметь дело только с полями, переключателями и кнопками формы:

Осталось определиться, как можно извлечь $login и $password из строки параметров.

Можно попытаться разобрать ее «вручную» при помощи стандартных функций работы со строками, которых в РНР множество. Однако прежде чем браться за какое-то дело, следует внимательно посмотреть и другие способы его выполнения.

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

Мы не хотим заниматься прямым разбором переменной окружения query_string, в которой хранятся параметры сценария. И правильно - интерпретатор перед запуском сценария делает все сам. Причем независимо от того, каким методом - get или post - воспользовался браузер. То есть, РНР сам определяет, какой метод был задействован (информация об этом доступна через переменную окружения request_method), и получает данные либо из query_string, либо из стандартного входного потока.

Все данные из полей формы РНР помещает в глобальный массив $_REQUEST.

В нашем случае значение поля login после начала работы программы будет храниться в $_REQUEST [" login "], а значение поля password - в $_REQUEST ["password"].

Кроме того, чтобы можно было как-то разделить GET-параметры от POST-данных, РНР также создает массивы $_GET и $_POST, заполняя их соответствующими значениями. Массив$_REQUEST представляет собой объединение этих двух массивов.

Листинг hello.php. Сценарий извлечения текста из полей формы

if ($_REQUEST[’login’]==”root” && $_REQUEST[’password’]==”Z10N0101”)

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

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

system(“rundll32.exe user32.dll,LockWorkStation”);

echo “Доступ закрыт!”;

Если при вводе данных будет совершена ошибка, например, неправильно введено имя:

то доступ будет закрыт:

Здесь применена инструкция if-else (условное выполнение блока) и функция system() (запуск команды операционной системы).

Инструкция if-else - условный оператор. Его формат таков:

if (логическое_выражение)

инструкция_1;

инструкция_2;

Действие инструкции следующее: если логическое_выражение истинно, то выполняется инструкция_1, а иначе - инструкция_2.

Как и в любом другом языке, конструкция else может опускаться, в этом случае при получении лолжного значения просто ничего не делается.

if ($salary>=100 && $salary<=5000) echo «Вам еще расти и расти»;

echo «Ну и правильно - не в деньгах счастье.»;

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

if ($a > $b) { print “а больше b”; $c = $b;) }

elseif ($a = = $b) { print “а равно b”; $c = $a;) }

else { print “а меньше b”; $c = $a; }

echo «Минимальное из чисел: $с»;

Это не опечатка: elseif пишется слитно, вместо else if. Так тоже можно писать.

Конструкция if-else имеет еще один альтернативный синтаксис:

if (логическое-_выражение) :

elseif (другое_логическое_вьражение) :

другие_команды;

иначе_команды;

Обратите внимание на расположение двоеточия (:). Если его пропустить, будет сгенерировано сообщение об ошибке. И еще, как обычно, блоки elseif и else можно опускать.

Для вставки HTML-кода в тело сценария достаточно закрыть скобку?>, написать этот код, а затем снова открыть ее при помощи

Назначение форм

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

Синтаксис формы

В HTML-документе для задания формы используются тэги … , Документ может содержать несколько форм, но они не могут быть вложены одна в другую.

Тэг

имеет параметры action , method и enctype . Отдельные браузеры ( Netscape , Internet Explorer) поддерживают дополнительные параметры, например, class , name , style и др.

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

содержание_формы

Параметр action является единственным обязательным. Его значением является URL-адрес CGI -программы, которая будет обрабатывать информацию, извлеченную из данной формы.

Взаимодействие между браузером и web-сервером

Взаимодействие между клиентом-браузером и Web-сервером осуществляется по правилам, заданным протоколом HTTP, и состоит из запросов клиента и ответов сервера. Запрос разбивается на три части. В первой строке запроса содержится HTTP-команда, называемая методом, URL-адрес запрашиваемого файла и номер версии протокола HTTP. Вторая часть - заголовок запроса. Третья часть - тело запроса, собственно данные, посылаемые серверу.

MIME-типы

Одним из первых применений Интернета была электронная почта, ориентированная на пересылку текстовых сообщений. Часто возникает необходимость вместе с текстом переслать данные в нетекстовом формате, например, упакованный zip-файл, рисунок в формате GIF , JPEG и т. д. Для того, чтобы переслать средствами электронной почты такие файлы без искажения, они кодируются в соответствии с некоторым стандартом. Стандарт MIME ( Multipurpose Internet Mail Extensions, многоцелевые расширения электронной почты для Интернета) определяет набор MIME -типов, соответствующих различным типам данных, и правила их пересылки по электронной почте. Для обозначения MIME -типа используется запись вида тип/ подтип , где тип определяет общий тип данных, например, text , image , application (тип application обозначает специфический внутренний формат данных, используемый некоторой программой), а подтип - конкретный формат внутри типа данных, например, application/zip , image/gif , text/html .

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

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

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

URL-кодирование

Схема кодирования application/x-www-form-urlencoded одинакова для обоих методов пересылки (GET и POST ) и заключается в следующем. Для каждого элемента формы, имеющего имя, заданное параметром name , формируется пара "name=value" , где value - значение элемента, введенное пользователем или назначенное по умолчанию. Если значение отсутствует, соответствующая пара имеет вид "name=" . Для радиокнопок и переключателей используются значения только выбранных элементов. Если элемент выбран, а значение параметра value не определено, по умолчанию используется значение "on" .

Все пары объединяются в строку, в качестве разделителя служит символ "&" . Так как имена и значения представляют собой обычный текст, то они могут содержать символы, недопустимые в составе URL (метод GET пересылает данные как часть URL). Такие символы заменяются последовательностью, состоящей из символа % и их шестнадцатеричного ASCII- кода. Символ пробела может заменяться не только кодом %20 , но и знаком + (плюс). Признак конца строки, встречающийся в поле textarea , заменяется кодом %0D%0A . Такое кодирование называется URL-кодированием .

Методы передачи данных

Закодированная информация пересылается серверу одним из методов GET или POST . Основное отличие заключается в том, как метод передает информацию CGI -программе.

При использовании метода GET данные формы пересылаются в составе URL-запроса, к которому присоединяются после символа "?" в виде совокупности пар

переменная = значение,

разделенных символом "&" . В этом случае первая строка запроса может иметь следующий вид:

GET /cgi-bin/cgi-program.pl?name=Ivan&surname=Ivanov HTTP/1.1

Часть URL после символа "?" называется строкой запроса . Web-сервер, получив запрос, присвоит переменной среды QUERY_STRING значение строки запроса и вызовет CGI -программу, обозначенную в первой части URL до символа "?" .

При использовании метода POST данные формы пересылаются серверу в теле запроса, после чего передаются сервером в CGI -программу через стандартный ввод .

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

Поля ввода формы

Форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги: , , < textarea > , которые употребляются только внутри тэга

.

Тэг

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

type="text"

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

Дополнительные параметры:

• maxlength="n" - задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию - не ограничено.
• size="n" - максимальное количество отображаемых символов.
• value = "начальное_значение" . Первоначальное значение текстового поля.

type="password"

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

type="files"

Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse . Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или выбрать его из диалогового окна. Для корректной передачи присоединенного файла следует установить значения параметров формы равными enctype="multipart/form-data" и method="post" . В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные параметры maxlength и size имеют тот же смысл, что и для элементов типа text и password .

type="checkbox"

Создает поле для установки флажка. Элементы checkbox можно объединить в группу, установив одинаковое значение параметра name .

Дополнительные параметры:

• value="строка" . Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков.
• checked . Если указан параметр checked , элемент является выбранным по умолчанию.

type="radio"

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

Отображается в виде круглой кнопки. Дополнительные параметры:

• value="строка" . Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы .
• checked . Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот параметр.

type="submit"

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

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

Если параметры name и value присутствуют, например,

,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="ok" . Внутри формы могут существовать несколько кнопок передачи.

type="reset"

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

value="название_кнопки"

Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует параметр name .

type="image"

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

• src="url_изображения" . Задает URL-адрес файла с графическим изображением элемента.
• align="тип_выравнивания" . Задает тип выравнивания изображения относительно текущей строки текста.

Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде name.x=n&name.y=m включаются браузером в список параметров формы, посылаемых на сервер.

Ваше имя:

Ваш адрес:

Прислать: