Получение и обработка данных, введенных пользователем, стали неотъемлемой частью большинства успешных web-сайтов. Бесспорно, возможности накопления статистики, проведения опросов, хранения персональных настроек и поиска выводят Web на принципиально новый уровень - без них эта среда обладала бы минимальной интерактивностью.

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

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

Общие сведения о формах

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

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

<form action = действие method = "метод" - элементы формы -</form>

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

Метод get передает все данные формы в конце URL. Из-за различных ограничений, связанных со спецификой языков и длиной данных, этот метод применяется редко.
Метод post передает все данные формы в теле запроса. Этот метод используется чаще, чем get.
В этой главе приведена лишь очень краткая вводная информация по основному син-таксису форм HTML. Более полную информацию можно найти в книге А. Хоумера и К. Улмена (СПб.: Питер, 1999).

Элементы форм, ориентированные на ввод с клавиатуры

Наше знакомство с построением форм начнется с элементов, ориентированных на ввод с клавиатуры. Таких элементов всего два - текстовое поле (text box) и текстовая область (text area).

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

В текстовых полях обычно вводится короткая текстовая информация - скажем, адрес электронной почты, почтовый адрес или имя. Синтаксис определения текстового поля:

<input type="text" nате="имя_переменной" size="N" maxlength="N" value="">

Определение текстового поля включает пять атрибутов:

type - тип элемента (для текстовых полей - text);
name - имя переменной, в которой сохраняются введенные данные;
size - общий размер текстового поля в браузере;
maxlength - максимальное количество символов, вводимых в текстовом поле;
value - значение, отображаемое в текстовом поле по умолчанию.
Текстовое поле изображено на рис. 10.1.

Рис. 10.1. Текстовое поле

Особой разновидностью текстовых полей является поле для ввода паролей. Оно работает точно так же, как обычное текстовое поле, однако вводимые символы заменяются звездочками. Чтобы создать в форме поле для ввода паролей, достаточно указать type="password" вместо type="text".

Текстовая область

Текстовая область (text area) используется для ввода несколько больших объемов текста, не ограничивающихся простым именем или адресом электронной почты. Синтаксис определения текстовой области:

<textarea name="имя_переменной" rows="N" cols="N" value=""></textarea>

Определение текстового поля включает три атрибута:

name - имя переменной, в которой сохраняются введенные данные;
rows - количество строк в текстовой области;
cols - количество столбцов в текстовой области.
Текстовая область изображена на рис. 10.2.

Рис. 10.2. Текстовая область

Элементы форм, ориентированные на ввод с мыши

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

Флажок

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

<input type="checkbox" name="имя_переменной" valuе="начальное_значение">

Определение флажка включает три атрибута:

type - тип элемента (для флажков - checkbox);
name - имя переменной, в которой сохраняются введенные данные (в данном случае - состояние элемента);
value - значение, присваиваемое переменной по умолчанию. Если флажок установлен, именно это значение будет присвоено переменной с указанным именем. Если флажок не установлен, значение атрибута value не используется.
Флажок изображен на рис. 10.3.

Рис. 10.3. Флажок

Переключатель

Переключатель (radio button) представляет собой разновидность флажка; он работает практически так же за одним исключением - в любой момент времени в группе может быть установлен лишь один переключатель. Синтаксис определения переключателя:

<input type="radio" name="имя_переменной" value="начальное_значение">

Как видите, синтаксис почти не отличается от определения флажка. Определение переключателя поля включает три атрибута:

type - тип элемента (для переключателей - radio);
name - имя переменной, в которой сохраняются введенные данные (в данном случае - состояние элемента);
value - значение, присваиваемое переменной по умолчанию. Если переключатель установлен, именно это значение будет присвоено переменной с указанным именем. Если флажок не установлен, значение атрибута value не используется.
Переключатель изображен на рис. 10.4.

Рис. 10.4. Переключатель

Раскрывающийся список

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

<select name="имя_переменной">

<option valuе="имя_переменной1 ">

<option value="имя_переменной2">

<option value="имя_переменнойЗ">

<option value="имя_переменнойN">

</select>

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

name - имя переменной, в которой сохраняются введенные данные (в данном случае - строка, выбранная в списке);
value - значение, отображаемое в списке по умолчанию.
Раскрывающийся список изображен на рис. 10.5.

Рис. 10.5. Раскрывающийся список

Скрытые поля

Скрытые поля не отображаются в браузере и обычно используются для передачи данных между сценариями. Хотя передача в скрытых полях работает вполне нормально, в РНР существует другое, более удобное средство - сеансовые переменные (см. главу 13). Впрочем, скрытые поля также используются в некоторых ситуациях и потому заслуживают упоминания.

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

<input type="hidden" name="имя_переменной" value="начальное_значение">

Определение скрытого поля включает три атрибута:

type - тип элемента (для скрытых полей - hidden);
name - имя переменной, в которой сохраняются скрытые данные;
value - значение, по умолчанию сохраняемое в скрытом поле.
Вообще говоря, название этого элемента - скрытое поле - несколько неточно. Хотя скрытые поля не отображаются в браузерах, пользователь может просто выполнить команду View Source и увидеть, какие скрытые значения хранятся в форме.

Кнопка отправки данных

Кнопка отправки данных инициирует действие, заданное атрибутом action тега <form>. Синтаксис определения:

<input type="submit" value="текст_на_кнопке">

Определение кнопки включает два атрибута:

type - тип элемента (для кнопки отправки данных - submit);
value - текст, по умолчанию отображаемый на кнопке.

Рис. 10.6. Кнопка отправки данных

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

Кнопка сброса отменяет все изменения, внесенные в элементы формы. Обычно никто ею не пользуется, однако кнопки сброса так часто встречаются на формах в Web, что я решил привести ее описание. Синтаксис определения:

<input type="reset" value=" текст _на_кнопке">

Определение кнопки включает два атрибута:

type - тип элемента (для кнопки сброса - reset);
value - текст, по умолчанию отображаемый на кнопке.
Кнопка сброса выглядит точно так же, как и кнопка отправки данных, если не считать того, что на ней обычно выводится слово (рис. 10.6).

Джейкоб Нильсен (Jakob Nielsen), известный авторитет в области Web, недавно напи-сал интересную статью о проблемах, связанных с использованием кнопки сброса. Статья опубликована по адресу http://www.useit.com/alertbox/20000416.html.

Все вместе: пример формы

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

Листинг 10.1. Пример формы для сбора данных

<form action = "process.php" method = "post">

<b>Please take a moment to tell us what you think about our site:</b><p>

<b>Name:</b><br>

<input type="text" name="name" size="15" maxlength="25" value=""><br>

<b>Email:</b><br>

<input type="text" name="email" size="15" maxlength="45" value=""><br>

<b>How frequently do you visit our site?:</b><br>

<select name="frequency">

<option value="">Site frequency:

<option value="0">This is my first time

<option value="l">&lt; 1 time a month

<option value="2">Roughly once a month

<option value="3">Several times a week

<option value="4">Every day

<option va1ue-"5">I'm addicted

</select><br>

<b>I frequently purchase the following products from our site:</b><br>

<input type="checkbox" name="software" value="software">Software<br>

<input type="checkbox" name="cookware" value="cookware">Cookware<br>

<input type="checkbox" name="hats" value="hats">Chef's Hats<br>

<b>0ur site's greatest asset is:</b><br>

<input type="radio" name="asset" value="products">Product selection<br>

<input type="radio" name="asset" value="design">Cool design<br>

<input type="radio" name="asset" value="service">Customer Service<br>

<b>Comments:</b><br>

<textarea name="comments" rows="3" cols="40"></textarea><br>

<input type="submit" value="Submit!">

</form>

Внешний вид формы в браузере изображен на рис. 10.7.

Рис. 10.7. Пример формы для ввода данных

Вроде бы все понятно. Возникает вопрос - как получить данные, введенные пользователем, и сделать с ними что-нибудь полезное? Этой теме посвящен следующий раздел, <Формы и РНР>.

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

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