Читаем без скачивания Электронные издания - Владимир Вуль

Тэг <SELECT> используется для организации компактной структуры для выбора одного варианта из нескольких, задаваемых в виде списка прокрутки. А тэг <TEXTAREA> создает внутри формы поле для ввода многострочного текста в виде прямоугольной области, снабженной при необходимости полосами прокрутки. Кратко рассмотрим использование всех этих тэгов.

Тэг <INPUT> содержит 2 обязательных параметра: TYPE, который задает тип поля ввода и NAME, с помощью которого имя переменной, соответствующей этому полю ввода передается CGI-программе.

Параметр TYPE может принимать несколько значений. Одно из этих значений TYPE="TEXT". В этом случае в форме создается узкая прямоугольная область (фрагмент строки) для ввода текста. Причем при этом значении параметра TYPE в тэге INPUT могут использоваться 3 дополнительных параметра, а именно: MAXLENGTH (наибольшая длина) = <число>, который определяет максимальное число вводимых символов, SIZE=<число>, задающий количество отображаемых в форме символов, и VALUE, который определяет значение текстового поля по умолчанию.

Другой вариант текстового поля – это TYPE="PASSWORD" (пароль). В этом случае вводимые символы отображаются в форме звездочками. Однако, реальная безопасность передаваемого пароля не обеспечивается, так как на сервер эта строка передается в незашифрованном виде, то есть открыто.

Еще одно значение TYPE="FILE", причем в этом случае одновременно с полем для ввода текста (имени локального, то есть размещенного на компьютере клиента, файла) в форме создается кнопка с подписью BROWSE (просмотр). Файл, выбираемый в процессе просмотра (локальный адрес его может быть сразу введен в поле), подсоединяется к содержимому формы при ее пересылке на сервер. Для корректного выполнения этой операции должны быть правильно заданы параметры формы: METHOD="POST" и ENCTYPE="MULTIPART/FORM-DATA". В противном случае вместо содержимого файла на сервер будет передано только его имя.

Значение TYPE="CHECKBOX" (переключатель) создает поле ввода одного символа–флажка или переключателя типа "включено" либо "выключено". Такие поля могут объединяться в группы путем задания для всех одного имени (NAME). Используется параметр VALUE, который передает на сервер выбранные переключатели. Может присутствовать также параметр CHECKED (установленное значение, обычно по умолчанию), указывающий, что определенное значение соответствующего элемента является выбранным по умолчанию.

Значение TYPE="RADIO" (селективная кнопка, зависимый переключатель) определяет структуру, подобную многопозиционному переключателю, то есть набор из нескольких выключателей (иначе радиокнопок), один (и только один) из которых включен в любой отрезок времени. Каждый выключатель оформлен в виде круга, внутри которого при его выборе появляется точка. Здесь строковая переменная VALUE передает на сервер значение выбранной кнопки, а параметр CHECKED устанавливает значение по умолчанию.

Значение параметра TYPE="RESET" (сброс, возврат в исходное состояние) или же "SUBMIT" (запустить, инициализировать выполнение) соответственно отменяет все введенные в форму значения или же пересылает содержимое формы на сервер. В обоих случаях в форме отображаются кнопки с соответствующими надписями. Надписи на кнопках можно русифицировать, задав значение параметра VALUE равным Отмена или же OK (Пересылка) соответственно. Возможно использование значения параметра TYPE="IMAGE". В этом случае создается графическое изображение, аналогичное кнопке SUBMIT. Адрес изображения задается стандартным параметром SRC=<URL файла-изображения>, а способ выравнивания – значением параметра ALIGN.

Иногда вместо тэга INPUT используется контейнер <SELECT> и </SELECT>, который позволяет организовать выбор значений в пределах спискового окна. Это обеспечивает экономию пространства формы. Пример контейнера:

<SELECT NAME="имя поля" SIZE=[число видимых элементов списка] >

<OPTION VALUE="значение 1-го элемента"> значение элемента

<OPTION VALUE="значение 2-го элемента"> значение элемента

<OPTION VALUE="значение 3-го элемента"> значение элемента

</SELECT>

Если требуется возможность выбора нескольких значений элементов списка, то внутри тэга <SELECT> после параметра SIZE используется дополнительный параметр MULTIPLY (множественный). Ему не требуется присваивать какого-либо значения, само его наличие в пределах тэга является достаточным.

Внутри формы может использоваться и еще один контейнер, а именно с тэгом <TEXTAREA>. Он обеспечивает ввод многострочного текста в прямоугольное окно. Параметры этого тэга: NAME – для задания имени соответствующей переменной, ROWS и COLS – для определения размера прямоугольного окна, внутри которого набирается нужный текст. Кроме того, может быть задан текст, выводимый внутри этого окна по умолчанию.

В качестве примера можно остановится на форме сервера www.rambler.ru, которая выводится на браузере клиента, желающего получить бесплатный почтовый адрес. На рис. 2.13 представлена такая форма в несколько усеченном формате. Как видно на рисунке, большинство полей – текстовые однострочные, задаваемые тэгом INPUT и значениями параметра TYPE, равным TEXT (E-mail, "Имя", "Фамилия", "Возраст") и PASSWORD ("Введите пароль" и "Подтвердите пароль"). В состав формы включены 2 переключателя: для указания пола клиента и его юридического статуса (физическое лицо либо представитель юридического лица). Для сокращения размеров формы (она и так получилась довольно большой) в ней используются 4 списковых окна с одним единственным видимым элементом. Эти окна реализуются с помощью тэга-контейнера <SELECT> со значением параметра SIZE=1.

Рис. 2.13. Пример отображения формы для регистрации клиента электронной почты

Наконец, в форме предусмотрена область для ввода текста, задаваемая с помощью тэга <TEXTAREA>. Размер этой области: 6 строк и около 100 столбцов. По умолчанию в этой области выводится текст юридического соглашения с клиентом бесплатной электронной почты, указывающий права и обязанности сторон. Клиент не может изменять этот текст, он должен его прочесть и принять условия соглашения, изложенные в этом тексте, если намерен получить бесплатный почтовый адрес на этом сервере. В конце формы предусмотрена кнопка типа SUBMIT, представленная в виде графического изображения с надписью "Зарегистрироваться". Если клиент согласен с текстом соглашения, он нажимает кнопку "Зарегистрироваться" и получает бесплатный почтовый адрес на сервере RAMBLER.

2.9. Понятие о динамическом HTML и его компонентах

Динамический HTML (DHTML) это не какой-то особый язык, а термин, который применяется для обозначения HTML-страниц с динамически изменяющимся содержимым. Такие страницы основаны на использовании помимо языка HTML каскадных таблиц стилей CSS (Cascade Style Sheets) и языка сценариев JavaScript или VBScript. Связь этих компонентов осуществляется с помощью так называемой объектной модели документа DOM (Document Object Model). При этом HTML-документ приобретает новое качество, а именно возможность динамического изменения без перезагрузки страницы.

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

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Язык позволяет разрабатывать как серверные приложения, так и клиентские приложения. Первые выполняются на Web-сервере, а вторые – браузером клиентского компьютера. Для обоих типов приложений используется общее ядро, включающее стандартные объекты и конструкции, и дополнения для конкретных приложений. Сказанное иллюстрируется рис. 2.14. Как видно на рисунке в состав ядра помимо переменных и функций LiveConnect входит средство взаимодействия с Java-апплетами. Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения элементов страницы, серверные же приложения предварительно компилируются для увеличения производительности.

Язык JavaScript используется на клиентской стороне для создания HTML-документов с помощью сценариев, в том числе и совместно с CSS (каскадными таблицами стилей), для оперативной проверки HTML-форм до их передачи на сервер для последующей обработки и для взаимодействия с пользователем в процессе выполнения приложений этого языка. Трудно найти в сети Интернет хотя бы одну страницу, не содержащую операторов языка JavaScript. Чтобы браузер смог отобразить разработанную Web-страницу именно в том виде, каком она задумывалась, на странице обычно помещают вызов функции JavaScript для идентификации типа используемого браузера и его версии.

Рис. 2.14. Компоненты языка JavaScript

Встраивание сценариев JavaScript в HTML-страницу можно осуществить одним из 4 способов:

✓ заданием операторов языка JavaScript внутри контейнера <Script> языка HTML;