HTML-формы. Формы в HTML Значения от и до в форме html

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

Итак, пользователь загрузил себе Web-страницу, на которой располагаются органы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе. Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при помощи самых различных технологий программирования. Объединяет их лишь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway Interface). Поэтому обрабатывающие программы часто называют CGI-приложениями или CGI-скриптами.

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

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

Форма ограничивается тегами

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

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

  • Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и будет, обрабатывать данные, введенные пользователем при помощи органа управления данной формы.
  • Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значения параметра используется одно из двух предустановленных ключевых cлов: get или post . Сейчас нам нет нужды узнавать, какие механизмы peaлизуются при помощи того или иного метода. Так или иначе, в сопроводительной документации CGI-приложения указывается, какой метод neредачи данных следует использовать. По умолчанию используется значек get.
  • Параметр enctype используется для указания типа передаваемых данных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded , используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений.
  • Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых файлов. В качестве значения данного параметра используется текстовая строка, в которой записывается одно или несколько названий кодировок. В том случае, если применяется несколько кодировок, их наименование разделяются пробелами или запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками
  • Параметр accept задает типы передаваемых файлов. Обычно не используется, так как сервер вполне в состоянии сам адекватно распознать тип принимаемого файла.
  • Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице может находиться несколько форм. В этом случае значения параметров name у них не должны совпадать.

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

Листинг 1.33

"http://www.w3.org/TR/html4/strict.dtd">



<р>Поле для ввода строки текста < input type="text">




Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33

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

  • Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
  • Параметр name предназначен для установки уникальных имен для каждого органа управления. Несмотря на то, что параметр не является обязательным, настоятельно рекомендуется использовать его. В сопроводительной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
  • Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользователю, но именно это значение получить обрабатывающее CGI-приложение если пользователь выберет соответствующий переключатель.
  • Параметр cheked используется только для независимых переключателей и радиокнопок. Он устанавливает их начальное состояние. Если этот параметр будет введен в тег <input> , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
  • Параметр disabled делает орган управления недоступным для использования пользователем. Параметр используется без значений.
  • Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отображаемые в этих полях, нельзя будет изменять.
  • Параметр size обычно задает размеры органа ввода данных. Но для каждого отдельного типа органов ввода его действие специфично.
  • Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстового ввода. Значением параметра является целое положительное число.
  • Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
  • Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
  • Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
  • Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

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

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

Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи параметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые пользователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.

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

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

Также мы можем создавать группы переключателей, которые часто называют зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создается при помощи тега с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.

Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.

Листинг 1.34

:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
, </head><br> <form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> <br> <р>Поле для ввода строки текста <input type="text"> </p> <br> <р>Поле для ввода пароля <input type="password"> </p><br> <р>Независимый переключатель <input type="checkbox" value="checked"> </p><br> <р>Группа переключателей</р><br> <р>Альтернатива 1 <input type="radio" name="groupl" value="checkl"> </p><br> <р>Альтернатива 2 <input type»"^adio" name="groupl" value="checki checked> </p><br> <р>Альтернатива 3 <input type="radio" name="groupl" value="check3"> </p><br> <input type="submit" value="Отправить"> </form> <br> </body> </html> </i></p><p>На приведенной иллюстрации (рис. 1.33) видно, как отображается введен ный текст в обычном поле ввода и в поле ввода конфиденциальной информации. А в листинге 1.34 четко показано, как мы можем создавать независимые переключатели и группы переключателей. При этом, второму по счету переключателю в группе мы изначально установили взведенное состояние по умолчанию. Но пользователь, естественно, всегда может сам выбрать требуемую альтернативу.</p><p>При помощи параметра<i> type </i> с приписанным значением hidden мы можем создавать скрытые поля. Это поле не только не позволяет пользователю вводить какую-либо информацию, но и вообще не отображается в окне просмотра. Данный тип поля применяется обычно для служебных целей разработчиков. А при помощи значения<i> file </i> мы можем создавать поле ввода имени файла При этом, рядом с полем ввода текста автоматически создается кнопка с наименованием Обзор, при нажатии на которую открывается стандартный диалог выбора файла.</p><p>Помимо органов ввода информации, мы можем размещать еще и органы управления. В данном случае Ими являются кнопки. В формах используется три вида кнопок. Кнопка типа "submit" отправляет введенные пользователем данные обрабатывающему CGI-приложению. Кнопка "reset" убирает из органов ввода информацию, внесенную пользователем, и отображает информацию, установленную по умолчанию. Существуют и простые кнопки, реакцию которых мы можем программировать самостоятельно при помощи скриптовых языков. Также, вместо кнопки "submit" мы можем использовать любое графическое изображение. Рассмотрим способы создания этих органов управления.</p> <p><img src='https://i2.wp.com/tepka.ru/html4b/33.jpg' height="478" width="427" loading=lazy></p> <p>Рис. 1.33. <i>Окно браузера с результатом отображения файла, приведенного в листинге. 1.34 </i></p> <p>Кнопка типа "submit" создается при помощи конструкции следующего вида:</p> <p><i><input type="submit" vа1uе="Подтвердить"> </i></p> <p>Как видно, создание кнопки производится при помощи параметра <i>type </i>, a надпись на ней задается значением параметра <i>value </i>. Если же нам необходимо создать кнопку очистки полей ввода информации, мы можем применить следующий фрагмент кода:</p> <p><i> <input type="reset" value="Oчистить"> </i></p><p>А для простой кнопки мы используем конструкцию следующего вида:</p> <p><i> <input type-"button" value="Kнопка"> </i></p><p>Мы уже говорили, что вместо обычной кнопки типа "submit" мы можем использовать любое графическое изображение. Для этого мы применяем такой фрагмент кода:</p> <p><i> <input type="invage" src="http://www.mysite.com/image/pict.gif"> </i></p><p>В этом случае нет нужды использовать параметр <i>value </i>, так как не нужно задавать надпись на кнопке. Но тогда необходимо использовать параметр <i>src </i>, значением которого является URL используемого графического файла.</p><p>Но помимо тех органов ввода информации, которые мы уже рассмотрели, есть и дополнительные органы, которые не реализуются при помощи тега <i><input> </i>. К ним относится раскрывающегося списка и многострочное поле текстового ввода.</p><p>Выпадающий список реализуется при помощи тега <i><select> </i>. При этом, естественно, используется и его закрывающая пара<i> </select>. </i> Между этими тегами мы объявляем элементы списка при помощи тегов <i><option>. </i> Тег <i><select> </i>, естественно, обладает некоторыми свойствами, регулируемыми при помощи параметров.</p> <ul><li>Параметр <i>name </i>, как обычно, задает уникальное имя данного поля ввода, т. е. раскрывающегося списка.</li> <li>Параметр <i>size </i> задает количество видимых строк при раскрытии списка. Естественно, самих элементов в списке может быть больше, чем отображаемых строк. Но в этом случае всего-навсего будет отображаться вертикальная полоса прокрутки. Значением параметра является целое положительное число.</li> <li>Параметр <i>multiple </i> применяется, если мы хотим позволить пользователю выбирать из списка несколько значений сразу.</li> <li>Параметр <i>disable </i>заставляет браузер отображать данный выпадающий список, но при этом пользователь не получит возможность активизировать его и выбрать какое-либо значение.</li> <li>Параметр<i> tabindex </i>, как мы уже знаем, устанавливает порядковый номер элемента ввода данных в последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.</li> </ul><p>A сами элементы выпадающего списка создаются при помощи тегов <option>. Эти теги тоже имеют свои свойства. Но их не так уж и много.</p> <ul><li>Параметр <i>selected </i> используется для тех элементов, которые при активации выпадающего списка будут выделяться по умолчанию.</li> <li>Параметр<i> value </i>указывает значение, которое будет передано обрабатывающему CGI-приложению, если пользователь выделит именно этот элемент выпадающего списка.</li> </ul><p>Теперь рассмотрим несложную процедуру создания выпадающих списков в формах HTML-документов (рис. 1.34).</p> <p>Листинг 1.35</p> <p><i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/htm!4/Strict.dtd"><br> <html><br> <head><title>






/html>

Рис. 1.34. Окно браузера с результатом отображения файла, приведенного в листинге 1.35

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

  • Параметр name позволяет задавать уникальное имя для данного элемента ввода данных,
  • Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число.
  • Параметр cols задает ширину в символах создаваемого поля текстового ввода. Параметр также является обязательным.
  • Параметр disabled используется, если поле необходимо сделать недоступным для использования.
  • Параметр readonly применяется для создания полей с нередактируемьм текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его.
  • Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.
  • Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.

Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).

Листинг 1.36

"http://www.w3.org/TR/html4/strict.dtd">







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

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

Рис. 1 .35. Окно браузера с результатом отображения файла, приведенного в листинге 1 .36

Для создания подобных текстовых пометок и заголовков, связанных с конкретными элементами ввода данных, мы можем использовать тег Но привязывать подобные метки мы сможем только к тем органам ввода данных, для которых мы явно задали идентифицирующий фаметр id. Именно по нему и устанавливается соответствие между меткой и объектом формы. Основным параметром для тега служит параметр for, значением которого является значение параметра id объекта, к которому данная текстовая метка и привязывается. Приведем пример создания подобной связи. Сначала мы создадим независимый переключатель, а затем присоединим к нему связанный текстовый заголовок. Производится подобная операция при помощи следующего фрагмента кода:


Input type="checkbox" name="check" value="checked" id="checkl">

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

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

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

До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

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

Рис. 1. Улучшенные веб-формы с помощью HTML5

Создание HTML5-формы

1. Элемент

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

Таблица 1. Атрибуты тега
Атрибут Значение / описание
accept-charset Значение атрибута представляет собой разделенный пробелами список кодировок символов , которые будут использоваться для отправки формы, например, .
action Обязательный атрибут , который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
autocomplete

enctype Используется для указания MIME -типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
name Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" .
novalidate Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент

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

Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом

. Название группы проявляется слева в верхней границе
. Например, если в элементе
хранится контактная информация:

Контактная информация


Рис. 2. Группировка элементов формы с помощью

Таблица 2. Атрибуты тега
Атрибут Значение / описание
disabled Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера
, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения —
.
form
в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .

3. Создание полей формы

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

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

Таблица 3. Атрибуты тега
Атрибут Значение / описание
accept Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt Определяет альтернативный текст для изображений, указывается только для .
autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form Значение атрибута должно быть равно атрибуту id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
formaction Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.


_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id .
pattern Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты тега

7. Кнопки

Элемент создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента .

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

Таблица 9. Атрибуты тега
Атрибут Значение / описание
autofocus Устанавливает фокус на кнопке при загрузке страницы.
disabled Отключает кнопку, делая ее некликабельной.
form Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

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

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

Элемент

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

ВВЕДЕНИЕ

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 и способы его использования

Тег 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. Форма списка с единственным выбором

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

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

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

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

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

Посылка формы по е-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-кода в тело сценария достаточно закрыть скобку?>, написать этот код, а затем снова открыть ее при помощи

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

Данные формы

В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге
используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

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

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

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

Пример 3. Связывание формы с полями

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег
однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы (

Ваше имя:Ваш адрес:Прислать: