Формы

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

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

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

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

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

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

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

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

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

<input type="text" name="имя переменной" size="N" maxlenght="N" value="">

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

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

Введите следующий код HTML:

Сохраните файл под именем vvod_s_klaviatury.html, откройте его в браузере. Если Вы всё сделали правильно, Вы увидите в окне браузера страничку, приведённую на рисунке 2.1. Протестируйте текстовые поля при вводе разных имён и паролей.

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

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

Синтаксис определения текстовой области следующий:

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

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

Введите следующий текст HTML:

Сохраните файл под именем text_oblast.html, откройте его в браузере. Если Вы всё сделали правильно, Вы увидите в окне браузера страничку, приведённую на рисунке 2.2, в которой к полям для ввода имени и пароля добавилось поле ввода сообщений.

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

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

Флажок

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

Синтаксис определения флажка:

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

Введите следующий текст HTML:

Сохраните файл под именем flagi.html, откройте его в браузере. Если Вы всё сделали правильно, Вы увидите в окне браузера страничку, приведённую на рисунке 2.3, в которой организован список из нескольких пунктов. Пользователь может отметить один, несколько, или даже все пункты флажками.

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

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

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

Синтаксис определения переключателя:

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

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

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

Введите следующий текст HTML:

Сохраните файл под именем switsh.html, откройте его в браузере. Вы увидите страничку, приведённую на рисунке 2.4, в которой организованы два переключателя.

Каждый из переключателей создается с помощью тега <input> c атрибутом type="radio", однако в одну группу объединяются те переключатели, теги которых имеют одинаковые значения атрибута name=.

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

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

Синтаксис определения раскрывающегося списка:

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

Введите следующий текст HTML:

Сохраните файл под именем spiski.html, откройте его в браузере. Вы увидите страничку, приведённую на рисунке 2.5, в которой организованы два раскрывающихся списка.

Скрытые поля

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

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

Синтаксис определения скрытого поля:

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

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

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

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

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

Синтаксис определения кнопки отправки формы:

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

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

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

Кнопка сброса отменяет все изменения, внесённые в элемент формы.

Синтаксис определения кнопки сброса:

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

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

Кнопка сброса выглядит точно также, как и кнопка отправки данных, если не считать того, что на ней обычно выводится слово Reset.

Формы и РНР

Получение переменных из форм

Формы HTML должны содержать следующие элементы:

В HTML-коде первая строка для формы будет выглядеть примерно так:

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

Когда Вы щёлкните мышью на кнопке для пересылки HTML-формы, переменные будут посланы вашей программе, указанной в параметре action=, с помощью метода, указанного в параметре method=.

Метод может быть один из двух: или "post" или "get". Переменные, передаваемые из формы в сценарий РНР, помещаются в глобальный ассоциативный массив $http_post_vars или $http_get_vars в зависимости от метода, указанного в форме. Они автоматически становятся доступными для Вашей программы.

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

Создание формы калькулятора

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

Введите следующий текст HTML:

Чтобы начать создание формы с методом post и действием, выполняющимся в сценарии calculate.php, введите заголовок формы:

Чтобы создать поля ввода с надписью для двух переменных, введите:

Чтобы создать кнопку "Вычислить", введите текст

Чтобы закрыть форму, и завершить HTML-код введите текст:

Сохраните созданный файл под именем calculate_form.html в папке для документов Вашего Web-сервера. Запустите браузер, в строку Адрес: введите: http://localhost/calculate_form.html и нажмите Enter. В браузер отобразится страница calculate_form.html (pис. 2.6)

В окне браузера находится форма, содержащая поля ввода Значение 1 и Значение 2 и кнопку Вычислить. Остановитесь на минутку, чтобы посмотреть на HTML-форму и понять, какие имена будут иметь переменные, значения которых вводятся через форму.

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

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

Добавление переключателей в форму

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

http://localhost/calculate_form.html

Если Вы все сделали правильно, то в рабочем окне браузера появится страница calculate_form.html с группой переключателей Действиe: (рис. 2.8).

Теперь созданная нами форма содержит два поля ввода Значение 1 и Значение 2, переключатель Действие и кнопку Вычислить. Кроме того, к уже существующим двум переменным ($vall и $val2) добавилась еще одна с именем $calc, которая также будет посылаться в ваш сценарий.

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

Создание сценария калькулятора

В соответствии с выбранным в форме calculate_form.html действием, необходимо назвать PHP-сценарий calculate.php. Цель сценария - принять два значения переменных $val1 и $val2 и произвести с ними вычисления в зависимости от значения переменной $calc.

Это выражение как бы говорит: "Если любая из переменных не имеет значения, то нужно выполнить блок программы, распо-ложенный сразу после оператора if".

//здесь будет находиться блок программы,

header ("location: http://localhost/calculate_form.html");
exit;

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

Пересылка формы и получение результатов

Мы создали все, что нужно для калькулятора: внешний вид (форму) и внутреннее содержание (сценарий), теперь можно приступить к его проверке. Запустите ваш Web-браузер, в поле Адрес: введите:

и нажмите клавишу Enter, в рабочем окне браузера появится страница с формой (рис. 2.10).

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

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

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

Рис. 2.12. Результат проверки действия вычитания двух чисел.

Результат умножениядвух чисел показан на рис. 2.13.

Рис. 2.13. Результат проверки действия умножения двух чисел.

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

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

Функция phpinfo () выводит большое количество информации о программном обеспечении Web-сервера, версии РНР, который вы запустили, и об основных переменных окружения HTTP. Чтобы посмотреть эту информацию, выполните следующие действия:

http://localhost/phpinfo.php

Информация, выводимая функцией phpinfо (), будет различной не только на разных компьютерах, но и при использовании разных операционных систем. На Рис. 2.15 показана информация, полученная при использовании операционной системы Windows.

Чтобы посмотреть переменные окружения, прокрутите страницу вниз с помощью вертикальной полосы прокрутки и найдите раздел Apache Environment (Окружение) (pис. 2.16).

В следующем параграфе вы узнаете, как использовать две переменные окружения REMOTE_ADDR и HTTP_USER_AGENT.

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

Переменная окружения REMOTE_ADDR содержит IP-адрес компьютера, выполняющего запрос. Чтобы получить значение переменной окружения REMOTE_ADDR, выполните следующие действия:

http://localhost/remoteaddress.php

и нажмите клавишу Enter. В рабочем окне браузера появится информация о IP-адресе вашего компьютера (Рис. 2.17).

Переменная окружения HTTP_USER_AGENT содержит тип и версию браузера, кодировку языка и тип операционной системы. Например, строка Mozilla/4.61 - (Win98;l) означает, что используется браузер Netscape (Mozilla), версии 4.61, язык английский, операционная система Windows 98. Могут быть и другие значения переменной HTTP_USER_AGENT. Например, при использовании Microsoft Internet Explorer (MSIE) версии 5.0 с операционной системой Windows 98, значение переменной HTTP_USER_AGENT может иметь тип браузеpa Netscape с примечанием compatible (совместимый) и указанием конкретного браузера, как показано в приведенной ниже строке:

He забудьте еще о текстовых браузерах. В операционной системе Linux значение переменной HTTP_USER_AGENT может выглядеть так:

Чтобы найти и вывести на экран переменную HTTP_USER_AGENT, выполните следующие действия:

http://localhost/useragent.php

и нажмите клавишу Enter. В рабочем окне браузера появится информация о типе браузера и операционной системе вашего компьютера (рис. 2.18).

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