• ×

    • HTML формы. Формы в HTML Многострочное текстовое поле - тег

    11.01.2022

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

    ВВЕДЕНИЕ

    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.

    Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы (, между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML?код (пример 9.3).

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

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

    Таблица
    12

    34

    Внимание!

    В тексте между тегами правильного 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. Два простых меню

    В тексте примера вы видите также упомянутый ранее HTML?элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:

    Value – текст, который будет отправлен с формой при выборе пункта меню;

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

    Disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут).

    Теперь осталось рассмотреть, для чего нужен третий HTML?элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML?элементов OPTION, определяющих пункты меню одной группы, в парные теги и . Параметры группы можно настроить с использованием следующих атрибутов HTML?элемента OPTGROUP:

    Label – строка с подписью для группы;

    Disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION).

    Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5).

    Пример 9.5. Группировка пунктов меню

    Меню, описанные в примере 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 по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя.

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

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

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

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

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

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

    Атрибут enctype

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

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

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

    С помощью средств HTML можно создавать формы для ввода информации посетителем Web-страницы.

    Тег

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

    Атрибуты тега
    accept-charset Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму. Помогает в ситуации, когда страницы сайта в одной кодировке, а данные нужно отправить в другой. Или когда браузер неправильно автоопределил кодировку. Например: accept-charset="cp1251" или accept-charset="utf8" . action Имя программы, которая будет обрабатывать форму. enctype Тип содержимого (метод кодирования). Например, если форма содержит файлы, то enctype="multipart/form-data" .
    (По умолчанию enctype="application/x-www-form-urlencoded "). method Метод передачи данных от формы обрабатывающей программе. Может принимать значения: get или post . При использовании get браузер кодирует данные, получаемые от пользователя, и добавляет к значению атрибута action парами имя=значение. Данные отделяются от значения атрибута action вопросительным знаком (?). При использовании post данные передаются отдельно. name Имя формы. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру. novalidate Наличие этого атрибута означает, что данные формы не должны проверяться. onsubmit JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз некорректно заполнил какое-то поле. target Фрейм, куда отправить полученную информацию (задается во фреймосодержащих документах).
    Пример
    ...Элементы формы...

    Контейнер

    …
    существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.

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

    Кнопка

    Тег