Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

$text = nl2br ($_POST [ "mytext" ]);
?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

2000
2001
2002
……………………………………………
2050

II. Ввод данных через цикл:

$year = 2000 ;
for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50
{
$new_years = $year + $i ; // Формируем новое значение
echo "" . $new_years . "" ; //Формируем новую строчку
}
?>

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

Описание:

Создадим HTML-форму для отправки файла на сервер.

Текстовое поле ввода имени (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, позволяющая с привлечением довольно небольшого количества усилий разработчика организовать взаимодействие с пользователями программ, работающих на удаленных серверах Сети.

Возможно, вам не раз приходилось заполнять анкеты на сайтах, например при регистрации ящика электронной почты. Если приходилось, то вспомните, что данные вы вводили прямо в окне браузера. После ввода данных нажимали кнопку типа Отправить. Далее браузер упаковывал и отсылал введенные вами данные на сервер, где их обрабатывало специализированное приложение (CGI?приложение). Так вот, формы нужны как раз для того, чтобы можно было организовать ввод данных от пользователя. HTML?документы с формами отличаются от обычных документов только наличием различных элементов управления: полей ввода текста, флажков, кнопок и др. (см. любое окно Windows или рис. 9.1).

Рис. 9.1. Пример HTML-документа с формой

Выше было сказано, что данные, введенные пользователем в форму, обрабатываются CGI?приложениями, работающими на сервере. Подробное рассмотрение этих приложений выходит за рамки книги. Здесь же стоит сказать, что CGI?приложение – это обычное приложение (программа), запущенное на сервере и способное получать данные, отправленные с использованием CGI (Common Gateway Interface). Отсюда, собственно, и название этого класса приложений. Вообще, такое приложение может быть реализовано как угодно: на Java, сценарием PHP, JSP или ASP и т. д. Общее, что такие приложения выполняют, – прием запроса (набора значений полей формы) с некоторой служебной информацией и передача в ответ HTML?документа, являющегося результатом обработки принятого запроса.

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

Для вставки формы в HTML?документ используется элемент FORM. Он задается парными тегами и . Между этими тегами помещаются описания элементов управления формы. Здесь также может быть помещен и другой текст с использованием разметки средствами HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент управления нужно вводить. При создании формы используются следующие атрибуты элемента FORM:

Action – обязательный для каждой формы параметр, URI программы?обработчика данных формы;

Method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;

Enctype – задает тип данных формы, если используется метод отправки post; по умолчанию имеет значение application/x-www-form-urlencoded; при необходимости передачи файлов используется значение multipart/form-data;

Accept-charset – используется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений – названий кодировок), по умолчанию используется значение UNKNOWN (приложение на сервере должно само определять кодировки);

Accept – описывает типы файлов (MIME?типы), передаваемые серверу; если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.

Пример описания формы:

Перед тем как приступить к рассмотрению элементов управления, которые можно поместить на форму, приведу несколько слов о методах отправки данных форм: для чего они нужны и чем отличаются. Итак, метод get часто используется для отправки небольших объемов данных, для которых достаточно набора символов кодировки ASCII. При этом данные формы присоединяются к строке URI, заданной в action формы. Для отделения данных от URI используется символ?. Точно таким же образом вы передавали данные почтовой программе при рассмотрении гиперссылок в гл. 5.

В отличие от get, метод post позволяет передавать CGI?приложению практически любые данные. При использовании метода post браузер отправляет приложению не строку URI с присоединенными данными, а по специальным правилам упаковывает данные формы и только после этого отправляет их CGI?приложению. Однако для того, чтобы с использованием метода post можно было пересылать бинарные или текстовые данные, для которых недостаточно символов кодировки ASCII, нужно указывать значения атрибута enctype элемента FORM равным multipart/form-data.

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

Стандартными являются все элементы управления, которые можно поместить на HTML?форму. Просто нужно как?то объединить и назвать элементы управления, которые используются чаще всего: однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на рис. 9.2.

Рис. 9.2. Стандартные элементы управления

Для обозначения всех этих элементов управления используется один HTML?элемент – INPUT. Элемент задается одиночным тегом и имеет следующие атрибуты:

Type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text, и создается, соответственно, поле для ввода текста), возможные значения и специфика работы соответствующих элементов управления рассмотрены далее;

Name – используется для задания имени элементу управления (строка, которая, помимо идентификации элемента управления, добавляется в данные, отсылаемые серверу);

Value – начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;

Checked – булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным (см. рис. 9.1);

Disabled – булев атрибут, установка которого не позволяет пользователю работать с элементом управления;

Readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);

Size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);

Maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);

Src – для элемента управления image задает расположение используемого изображения;

Title – описание элемента управления (может отображаться браузерами как всплывающая подсказка);

Align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML?элемента, поддерживающего этот атрибут;

Tabindex – номер элемента управления при навигации при помощи табуляции;

Accesskey – горячая клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).

После того как дано начальное описание элемента INPUT, можно проанализировать текст HTML?документа с формой, показанной на рис. 9.2 (пример 9.1).

Пример 9.1. Пример использования HTML-элемента INPUT

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

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

alt = "asfdsvdf">

Флажок:

checked>

Два переключателя:

и

Поле с именами файлов:

Щелчок на этом изображении также приведет к отправке данных:

В приведенном примере использованы все возможные значения атрибута type, кроме значения hidden. Поскольку использование каждого из значений атрибута type налагает различные ограничения на использование других атрибутов HTML?элемента INPUT, то целесообразно рассмотреть влияние каждого значения подробно. Для краткости особенности использования каждого значения сведены в таблицу (табл. 9.1).

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

Теперь рассмотрим, как вставить в форму более продвинутый элемент управления для редактирования текста – многострочное текстовое поле. Этот элемент управления обозначается HTML?элементом TEXTAREA и задается парными тегами и .

Главным отличием этого элемента управления от обычного текстового поля, кроме возможности ввода текста, состоящего из большого количества строк, является то, что начальное значение не задается атрибутом value, а записывается между тегами и .

При отображении в текстовом поле форматирование текста сохраняется точно так же, как при использовании HTML?элемента PRE.

В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер элемента управления задается не атрибутом size, а с помощью следующих атрибутов:

Rows – задает количество строк, которые отображаются без необходимости вертикальной прокрутки;

Cols – задает максимальное количество символов в строке текстового поля, отображаемое без переноса.

Многострочное текстовое поле выглядит так, как показано на рис. 9.3 (в браузере Internet Explorer).

Рис. 9.3. Многострочное текстовое поле

Для создания приведенного на рисунке текстового поля использовался следующий фрагмент кода (пример 9.2).

Пример 9.2. Создание многострочного текстового поля

</p><p>Первый перевод строки не учитывается</p><p>Все последующие переводы строки учитываются</p><p>Учитываются также отступы от начала строки</p><p>Можно использовать зарезервированные символы HTML, типа <>& и прочие</p><p>

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

Рис. 9.4. Кнопка с расширенными возможностями

Новый вид кнопок используется аналогично кнопкам, создаваемым HTML?элементом INPUT со значением атрибута type, равным button. Новые кнопки отличаются от своего аналога, прежде всего, созданием: для задания HTML?элемента BUTTON используются парные теги и , между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML?код (пример 9.3).

Пример 9.3. Создание кнопки BUTTON

На этом виде кнопок может быть помещен любой

HTML-текст c использованием разметки

Даже таблицы, не говоря уже об изображениях:

Таблица

1

2

3

4 Внимание! В тексте между тегами и правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать. Специфичным в настройке кнопки, создаваемой HTML?элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT. Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь). Меню При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML?элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них. Начнем с HTML?элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов и и поддерживает следующие атрибуты: Name – имя меню, которое также используется как название параметра при отправке формы; Size – задает количество строк, одновременно видимых пользователем; Multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно; Disabled – булев атрибут, деактивирует меню; Title – текст подсказки для меню; Tabindex – номер при перемещении между элементами управления при помощи табуляции. Элемент управления меню может представляться различными браузерами по?разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5. Рис. 9.5. Внешний вид меню Если использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя. Ниже приведен фрагмент текста HTML?документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4). Пример 9.4. Два простых меню Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Пункт 6 Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Пункт 6 В тексте примера вы видите также упомянутый ранее HTML?элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами и (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты: Value – текст, который будет отправлен с формой при выборе пункта меню; Selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple); Disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут). Теперь осталось рассмотреть, для чего нужен третий HTML?элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML?элементов OPTION, определяющих пункты меню одной группы, в парные теги и . Параметры группы можно настроить с использованием следующих атрибутов HTML?элемента OPTGROUP: Label – строка с подписью для группы; Disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION). Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5). Пример 9.5. Группировка пунктов меню Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6. Рис. 9.6. Внешний вид меню с группированными пунктами Подписи элементов управления Некоторые элементы управления, например кнопки, содержат надписи, по которым пользователь может определить назначение этих элементов управления. Для других элементов типа текстовых полей, флажков и т. п. приходится создавать подписи вручную, смешивая определения элементов управления формы с текстом. Существует еще один способ задания подписей к элементам управления – использование HTML?элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML?документа. Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами и помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления. При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом: Введите пароль: В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так: Введите пароль: Текст может находиться до или после определения элемента управления. В теле HTML?элемента LABEL в этом случае должно быть только одно определение элемента управления. 9.3. Группировка элементов управления При создании форм есть возможность сделать более выразительным общее предназначение некоторых элементов управления, дополнительно заключив их в рамку так, как показано на рис. 9.1. Рамку можно подписать, а можно оставить без подписи. Рамка создается при помощи HTML?элемента FIELDSET. Между парными тегами и помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка. Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML?элемент задается при помощи парных тегов и , между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по?разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают. В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6). Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI?приложения, способного обрабатывать форму. 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 по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя. Необходимо учитывать, что максимальный объем данных, передаваемых методом get , ограничен, в зависимости от настроек протокола, и в любом случае не может превышать 8192 Кб. Передача конфиденциальной информации методом get, несомненно, представляет определенную угрозу безопасности, так как get-строка остается в журналах всех промежуточных серверов и прокси-сервера. С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса. При передаче методом 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” .