• 11. Формы
• 11.1. Вставка форм
• 11.2. Текстовые поля
  • Текстовое поле Password
  • Текстовое поле Multi Line
• 11.3. Переключатели и флажки
• 11.4. Списки и меню
  • Создание меню
  • Создание списков
• 11.5. Кнопки
• 11.6. Графические кнопки
• 11.7. Файловое поле
• 11.8. Скрытое поле
• 11.9. Обработка форм
• 11.10. Режимы работы форм

11. Формы

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

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

Сами формы как объекты языка HTML обеспечивают только отображение и сбор информации. Ее обработка выполняется специальными программными средствами. Обычно в этой роли выступают так называемые сценарии CGI (Common Gateway Interface), написанные на разных языках программирования. Сложные функции обработки реализуются на языках Perl, C++, Java. Для простых алгоритмов обработки информации применяется язык JavaScript.

Вся статическая часть формы заключается внутрь контейнера, ограниченного дескрипторами <form> и </form>. В отличие от таблиц формы не разрешается вкладывать друг в друга, но нет запретов на размещение нескольких таких объектов на одной странице. Среди примерно десятка атрибутов, управляющих поведением формы, самыми важными являются два.

• Атрибут method дает информацию о способе передачи на сервер информации, собранной формой. Он может принимать два значения get и post. В первом случае данные пересылаются вместе с адресом URL. Это накладывает жесткие ограничения на длину передаваемого сообщения, поэтому данный метод в настоящее время применяется редко. Во втором случае накопленная информация пересылается в виде отдельного сообщения на стандартные каналы ввода-вывода обрабатывающей программы. Для этого метода не существует принципиальных ограничений на объем передаваемой информации.
• Атрибут action задает способ обработки полученной формы. Его значением может быть адрес URL программного средства, предназначенного для обработки содержимого формы, или адрес электронной почты для ее пересылки.

Так, дескриптор

<form method="post" action="http://www.aha.ru/cgi-bin/mailcall.pr">

предписывает передать содержимое формы программе Perl, расположенной по указанному адресу.

Внутри дескрипторных скобок, ограничивающих форму, могут располагаться различные объекты HTML, предназначенные для ввода информации. Основную нагрузку по сбору и хранению пользовательской информации несут на себе дескрипторы <textarea>, <select> и <input>.

Дескриптор <textarea> предназначен для ввода больших массивов текстовой информации. Объем вводимого текста не ограничен; кроме того, пользователь имеет возможность указать ширину и высоту области ввода.

Дескриптор <select> используется для создания раскрывающегося списка или списка с полосой прокрутки. Дескриптор является контейнером, внутрь которого заключаются описания всех пунктов.

Дескриптор <input> является одиночным тегом. Это одно из самых полезных средств организации форм. С помощью этого дескриптора можно создавать самые разные структурные элементы: флажки, кнопки отправки, ноля для ввода пароля, флажки, текстовые поля, переключатели и пр. Тип структурного элемента задается при помощи атрибута type. Например, дескриптор

<input type="submit" name="Send_button" value="Переслать">

создает кнопку с надписью Переслать, предназначенную для отправки сообщений на сервер.

11.1. Вставка форм

Формы вставляются в документ подобно другим объектам программы. Сначала надо поместить курсор в то место документа, которое выбрано для

Рис. 11.1. Объекты формы

привязки формы, а затем дать команду вставки. Программа располагает несколькими вариантами выдачи этой команды. Это команды Insert > Form (Вставка > Форма), Insert > Form Objects (Вставка > Объекты формы) и раздел Forms (Формы) палитры Objects (Объекты) (рис. 11.1).

Созданная форма помечается в окне документа пунктирным прямоугольником с границей красного цвета. Этот способ выделения работает, если, во-первых, включен режим View > Visual Aids > Invisible Elements (Вид > Cлужебная разметка > Скрытые объекты) и, кроме того, в основных настройках программы в разделе Invisible Elements (Скрытые объекты) выставлен флажок Form Delimiter (Граница формы).

Естественная последовательность создания формы требует, чтобы вначале был создан контейнер — Insert > Form (Вставка > Форма), а потом в нем были размещены все необходимые структурные элементы — Insert > Form Objects (Вставка > Объекты формы). При попытке вставить структурный элемент на свободное пространство страницы программа отображает окно, в котором предлагает добавить дескриптор формы. Если пользователь ответит согласием, то контейнер создается автоматически.

Перечислим все структурные составляющие форм.

• Text Field (Текстовое поле). Этот элемент управления предназначен ввода текста, который может отображаться в одну строку (single /line), в несколько строк (multi line) или представляться звездочками (password).
• Button (Кнопка). Кнопка инициирует выполнение заданных действий, Это может быть команда отправки данных на сервер или восстановление исходных значений полей формы. Название кнопки можно менять.
• Check Box (Флажок). Этот элемент управления позволяет включить или отключить какой-то режим или выбрать один из двух вариантой ответа на вопрос (да или нет).
• Radio Button (Переключатель). Группа переключателей позволяет выбрать один вариант из предложенного набора.
• List/Menu (Список/Меню). Создает стандартный элемент управления приложений Windows — раскрывающийся или обычный список. Этот объект может содержать полосы прокрутки. Он служит для выбора одного или нескольких вариантов из предложенного набора.
• File Field (Файловое поле). Предназначено для ввода или поиска имени файла. Процедура поиска запускается щелчком на кнопке Browse (Обзор), расположенной справа от этого поля.
• Image Field (Графическое поле). Используется для вставки в форму рисунка.
• Hidden Field (Скрытое поле). Может хранить информацию, которая не вводится пользователем, но требуется процедурой обработки содержимого формы. В качестве примера можно назвать дату заполнения формы.
• Jump Menu (Меню переходов). Создает меню, каждый пункт которого представляет собой команду гипертекстового перехода.

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

Дополнительная настройка и редактирование формы и ее составляющих выполняется при помощи палитры Property Inspector (Инспектор свойств) (CTRL+F3). Если выбрать форму целиком, то Инспектор свойств откроет доступ к общим настройкам, относящимся ко всему объекту. Таковых всего три.

• Form name (Имя формы). Текстовое поле для ввода собственного имени формы.
• Action (Действие). Поле для задания адреса URL или адреса электронной почты.
• Method (Метод). Этот список определяет способ передачи содержимого формы. Он состоит из трех пунктов: Get, Post и Default. В первом случае информация, введенная в форму, присоединяется к адресу URL. Большим недостатком этого способа является ограниченный объем послания. Оно не может превышать 8192 символа. Сообщения большего объема автоматически обрезаются, что может привести к непредсказуемым последствиям. В большинстве случаев следует использовать метод Post, который пересылает данные в специальном сообщении и поэтому не имеет столь жестких ограничений по объему. Вариант Default оставляет выбор метода пересылки на усмотрение программы просмотра. Обычно таким методом является Get.

Следует отметить некоторые особенности поведения форм на гипертекстовой странице.

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

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

Неплохие результаты дает использование предварительно отформатированного текста. Напомним, что текст, заключенный в парный дескриптор <рrе>, сохраняет свои габариты по горизонтали и наборы пробелов между буквами и словами. У такого текста кратные пробелы не поглощаются, что позволяет простыми средствами добиться удовлетворительного выравнивания по горизонтали. Раньше программы просмотра представляли предварительно отформатированный текст при помощи моноширинного шрифта Courier, чьи эстетические достоинства многими Web-дизайнерами ставятся под сомнение. Последние версии броузеров (начиная примерно с третьей) позволяют выбрать шрифтовое начертание для подобных фрагментов текста.

Для сложных форм, состоящих из нескольких текстовых полей, переключателей, флажков, наилучшее решение дает размещение в таблице. Параметры таблицы обеспечивают почти полный контроль вертикального и горизонтального положения структурных составляющих формы в ячейках. Подбирая значения полей (CellPad), интервалов (CellSpace) и типов выравнивания, можно добиться точной взаимной координации объектов формы (рис. 11.2).

Рис. 11.2. Расположение элементов формы в таблице

11.2. Текстовые поля

Текстовое поле — это область формы, в которую пользователь может ввести ответ на запрос или произвольное информационное сообщение.

Текстовые поля бывают трех видов (рис. 11.3).

• Single line (Однострочное). Служит для набора коротких сообщений или ответов.
• Multi line (Многострочное). Предназначено для ввода сообщений произвольной длины.
• Password (Пароль). Служит для ввода пароля.

Все три вида текстовых полей вставляются в форму при помощи одной и той же команды. Выбор типа выполняется средствами палитры Property Inspector (Инспектор свойств). За это отвечают три переключателя с теми же названиями, что и у самих объектов.

Рис. 11.3. Типы текстовых полей

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

Простое текстовое поле, состоящее из одной строки, кодируется при помощи дескриптора <input>. Простой пример такого объекта дает сведущая строка кода:

<input type="text" name="Имя_поля">

где атрибут type задает тип поля, а атрибут name — имя объекта.

Число дополнительных настроек простого текстового поля невелико. Рассмотрим их.

• TextField (Текстовое поле). Этот раздел палитры служит для задания имени текстового поля. Правила ввода таких имен обычные. Нельзя использовать специальные символы и задавать повторяющиеся имена. Не рекомендуется оставлять данный раздел пустым.
• Char Width (Ширина в символах). Ширина текстового поля, измеренная в символах. По умолчанию этот размер составляет примерно 20 символов. Точная длина поля устанавливается в программе просмотра.
• Max Chars (Максимальный объем). Максимальное число символов, которое можно ввести в текстовое поле. Если поле для ввода этого значения оставить пустым, то длина пользовательского ввода не ограничивается.
• Init Val (Начальное значение). В это поле можно ввести текстовую строку, которую программа просмотра выведет после первой загрузки страницы. Это может быть подсказка или наиболее вероятное значение текстового поля.

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

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

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

<input type="password" name="Имя_поля">

Кроме того, для этих двух типов полей полностью совпадают по смыслу и по названиям все дополнительные настройки, которые доступны в палитре Property Inspector (Инспектор свойств).

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

Для ввода большого количества текстовой информации следует использовать поля типа Multi Line (Многострочное). Чтобы создать объект этого типа, требуется разместить на странице текстовое поле, например командой Insert > Form Objects > Text Field (Вставка > Объекты форм > Текстовое поле), открыть инспектор свойств и выбрать в этой палитре переключатель Multi Line (Многострочное). В результате обычное поле, состоящее из одной строки, преобразуется в многострочное, длина которого составляет 18 символов, а высота — 3 строки.

Эта команда не только меняет внешний вид текстового поля, но преобразует кодовую форму его представления. Многострочные поля кодируются в языке HTML при помощи дескриптора <textarea>. Пример простейшего описания дает следующий фрагмент кода:

<textarea name="Имя_поля"><textаrea>

Вся дополнительная настройка объектов этого типа выполняется, как и прежде, средствами палитры Property Inspector (Инспектор свойств). Рассмотрим ее возможности.

• TextField (Текстовое поле). Собственное уникальное имя многострочного поля.
• Char Width (Ширина в символах). Ширина текстового поля, заданная в символах.
• Num Lines (Число строк). Количество строк текстового поля.
• Int Val (Начальное значение). Начальное значение поля. Информация, введенная в этом разделе, выводится в поле при первой загрузке страницы.
• Wrap (Перенос по словам). Список способов переноса текста в многостраничном текстовом поле. Он состоит из трех пунктов.
• Default (По умолчанию). По умолчанию принимается правило, согласно которому текст, достигший правого края поля, не переносится. Пользователь имеет возможность оборвать строчку нажатием клавиши ENTER.
• Virtual (Виртуальный перенос). Выбор этого пункта включает перенос только на экране. Сообщение, введенное в форму с такой настройкой, отправляется на сервер в виде одной строки.
• Physical (Фактический перенос). В этом режиме перенос по словам отображается на экране и сохраняет символы перехода на новую строку при отправке на сервер.

11.3. Переключатели и флажки

Механизм выбора пользователя на Web-страничке реализуется обычно при помощи элементов управления двух типов: переключателей (radio button) и флажков (check box). Первые дают возможность выбрать только один вариант из совокупности предложенных, вторые допускают множественный выбор альтернатив (рис. 11.4).

Эти структурные элементы форм не только имеют близкие области применения, их способы кодирования тоже очень похожи друг на друга. В исходном тексте страницы HTML они представляются дескриптором <input> с разными значениями атрибутов. Так, строка

<input type="checkbox" name="Имя_флажка" value="checkbox">{/font>

Рис. 11.4. Переключатель и флажок

описывает флажок, а строка

<input type="radio" name="Имя_переключателя" value="radiobutton">{/font>

это возможный вариант кодирования переключателя.

Для вставки переключателя надо дать команду Insert > Form Objects > Radio Button (Вставка > Объекты форм > Переключатель). Флажок создается командой Check Box (Флажок) того же меню. Кроме того, оба объекта представлены кнопками в разделе Form (Форма) палитры объектов.

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

Число дополнительных настроек минимально. Палитра Property Inspector (Инспектор свойств) разрешает задать имя переключателя или флажка и установить начальное состояние этих объектов. Для этого в разделе палитры Initial State (Начальное состояние) надо выбрать один из следующих вариантов.

• Checked (Помеченный). Устанавливает данный переключатель или флажок сразу после загрузки страницы.
• Unchecked (Непомеченный). Сбрасывает переключатель или или флажок.

Переключатели считаются индивидуальными элементами, поэтому каждый их них должен иметь уникальное имя, которое задается в поле CheckBox (Флажок) Инспектора свойств. Переключатели обычно образуют логически связанные группы. Все переключатели в группе должны иметь одинаковое имя и согласованные значения.

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

11.4. Списки и меню

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

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

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

Рис. 11.6. Список с полосами прокрутки

Создание меню

В языке HTML меню и списки кодируются при помощи парного дескриптора <select>, внутрь которого вкладываются теги вида <option>, описывающие отдельные пункты или команды меню. Например, следующий фрагмент кода создает простейшее меню из двух пунктов:

<select name="Имя_меню">

<optionvalue="мажор">до</оption>{/font>

<option value="минор">pe</option>

</select>

Создать меню можно следующим образом.

1. Поместите текстовый курсор внутрь формы.
2. Дайте команду Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/Меню) или щелкните на одноименной кнопке, расположенной в разделе Form (Форма) палитры объектов. В результате в форму добавляется заготовка меню, не содержащая ни одного пункта. Следующие шаги имеют целью информационное наполнение меню.
3. Не снимая выбора с меню, откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3).
4. В поле List/Menu (Список/Меню) введите уникальное имя объекта.
5. Щелчком на кнопке List Values (Пункты списка) откройте одноименное диалоговое окно, предназначенное для создания пунктов меню (рис. 11.7).

Рис. 10.7. Диалоговое окно List Values (Пункты списка)

6. Средствами диалогового окна List Values (Пункты списка) создать систему пунктов меню. Рассмотрим основные принципы работы с этим окном. Каждый пункт меню состоит из названия (Label), которое задается в левом столбце, и значения (Value) в правом столбце. Для выбора пунктов удобно использовать клавишу TAB или указатель мыши. В меню пункты представляются названиями. После того как пользователь выбрал один из пунктов и активизировал команду пересылки, значение этого пункта передается на сервер для дальнейшей обработки. Кнопка со знаком + служит для создания нового пункта. Его название и значение вводится с клавиатуры. Кнопка со знаком — удаляет текущий пункт. Кнопки со стрелками меняют последовательность пунктов меню. Щелчок на кнопке ОК заканчивает работу с этим диалоговым окном.
7. В поле List/Menu (Список/Меню) введите уникальное имя объекта.
8. В списке Initially Selected (Первоначальный выбор) выберите пункт, который будет отображаться в поле раскрывающегося списка при первоначальной загрузке страницы.

Каждый раздел меню описывается двумя идентификаторами: именем (Label) и значением (Value). Имя представляет раздел в меню и является обязательной частью его описания. Значение пересылается на сервер для дальнейшей обработки. Эта составляющая описания является факультативной и может быть опущена. В этом случае ее функции также будет выполнять имя пункта меню.

Создание списков

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

Команда Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/ Меню) размещает на странице пустую заготовку, которая превращается в список или меню в зависимости от настроек, выбранных с помощью Инспектора свойств. Чтобы создать список, надо установить в палитре Property Inspector (Инспектор свойств) флажок List (Список).

Для информационного наполнения пустого списка надо щелчком на кнопке List Value (Пункты списка) открыть диалоговое окно, показанное на рис. 10.7, и задать названия и значения пунктов списка. Техника работы с этим диалоговым окном рассмотрена в предыдущем разделе.

Несколько дополнительных настроек списков расположены на палитре Property Inspector (Инспектор свойств). Рассмотрим их.

• List/Menu (Список/Меню). Здесь задается имя списка.
• Height (Высота). Число строк, отображаемых в списке одновременно.
• Selections: Allow multiple (Множественный выбор). Этот флажок управляет режимом множественного выбора. Если он установлен, то в списке можно выбрать несколько пунктов одновременно и эта возможность сохраняется при отображении страницы в программе просмотра.
• Initially Selected (Первоначальный выбор). Этот раздел палитры позволяет указать первоначально выбранные пункты списка. Для выбора смежных пунктов надо удерживать нажатой клавишу SHIFT. Групповой выбор отдельных пунктов выполняется при нажатой клавише CTRL.

Если сбросить флажок Selections: Allow multiple (Множественный выбор) и задать высоту списка равной единице, то список выглядит как меню, Пустое поле Height (Высота) означает, что вопрос о высоте списка оставляется на усмотрение программы просмотра. Броузер Internet Explorer одновременно отображает четыре пункта, а программа Netscape Navigator выводит все пункты списка.

Не существует параметра, предназначенного для регулирования ширины списков и меню. Горизонтальные размеры этих объектов автоматически подгоняются под объем текста. Увеличить ширину можно посредством вставки требуемого количества символов неразрывного пробела (&nbsp;), причем этот символ надо ставить непосредственно в исходный текст списка или меню в режиме отображения кодов.

11.5. Кнопки

Кнопки — это средства управления интерактивными формами. Они активизируют пересылку данных и сбрасывают неверно набранную информацию. Эти функции управляющих кнопок являются штатными. Разработчик стра ницы может связать с кнопками форм любые дополнительные функции или команды, при условии, что написаны соответствующие программы. Две кнопки: Submit (Отправить) и Reset (Очистить) зарезервированы по названию и функциям. Эта стандартизация выходит за пределы программы и распространяется на язык гипертекстовой разметки. Первая кнопка запускает процедуру пересылки содержимого формы по указанному в поле Action (Действие) адресу, которым может быть адрес URL обрабатывающей программы или адрес электронной почты. Методом пересылки обычно является Post. Кнопка Reset (Сброс) сбрасывает текущие значения полей формы, что позволяет внести коррективы при наличии ошибок. Эти структурные элементы форм кодируются при помощи дескриптора <input>. Следующий фрагмент кода дает пример описания кнопки сброса:

<input type="reset" name="Имя_кнопки" value="Reset">{/font>

Чтобы вставить кнопку, используется команда Insert > Form Objects > Button (Вставка > Объекты формы > Кнопка).

Основная работа по редактированию и настройке кнопок выполняется сpeдствами палитры Property Inspector (Инспектор свойств). Перечислим доступны параметры настройки.

• Button Name (Имя кнопки). Имя кнопки.
• Label (Надпись). Надпись на кнопке. По умолчанию эта надпись совпадает с типом кнопки. Пользователь может задать в этом разделе палитры любое подходящее название, например вместо Submit набрать слово Отправить.
• Reset form (Очистить форму). Этот переключатель назначает данному объекту функцию очистки полей формы. По щелчку на кнопке вся информация, введенная в текстовые поля формы, удаляется.
• Submit form (Отправить форму). Этот переключатель связывает с данным объектом функцию пересылки данных. По щелчку на кнопке данные формы передаются на сервер.
• None (Нет). Этот переключатель означает, что с данной кнопкой не связывается никакое поведение. Щелчок на кнопке не запускает программ и не вызывает никаких изменений в состоянии формы. Если кнопка должна выполнять нестандартные функции, следует выбрать именно этот вариант.

Для кнопок с нестандартными функциями требуется прямое ручное редактирование исходного текста документа. При помощи палитры задаются ее имя, надпись и “пустое поведение” (None). Число различных программных функций, которые можно связать командной кнопкой, слишком велико, чтобы дать их представительное описание в коротком paзделе. Чаще всего такие функции пишутся на языке JavaScript и вызываются по щелчку на командной кнопке. В этом случае примерное описание может выглядеть следующим образом:

<input type="button" name="Имя_кнопки" value="yes" onClick="doFunction()">

где сама функция описана в разделе <script>.

11.6. Графические кнопки

Стандартные кнопки Submit (Отправка), Reset (Сброс), а также кнопки, построенные на их основе, не отличаются стильным дизайном. Их казенное оформление подходит не для любого гипертекстового документа, претендующего на художественность и стиль. Разработчик Web-страниц не обязан использовать только предопределенные кнопки; он имеет возможность создать командную кнопку на основе любого растрового изображения.

1. Поместите курсор в место, выбранное для размещения графической кнопки.
2. Дайте команду Insert > Form Objects > Image Field (Вставка > Объекты формы > Графическое поле). Появится диалоговое окно Select Image Source (Выбор изображения).
3. При помощи этого окна выберите нужное изображение. После того как графическая основа управляющей кнопки создана, с ней требуется связать определенную программную функцию. Некоторый выбор простых функций предоставляет палитра Behaviors (Режимы) (Shift+F3). Функции, обеспечивающие сложное или нестандартное поведение кнопки, пользователю придется создавать вручную или разыскивать на бескрайних просторах всемирной сети Интернет.

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

11.7. Файловое поле

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

<input type="file" name="Имя_поля">

Вставка файлового поля производится следующим образом.

1. Поместите текстовый курсор в форму.
2. Дайте команду Insert > Form Objects > File Field (Вставка > Объекты формы > Файловое поле).
3. Откройте палитру Property Inspector (Инспектор свойств) и выполните настройку файлового поля. Рассмотрим немногочисленные параметры этого объекта.
• FileField Name (Имя файлового поля). Раздел палитры служит для ввода уникального имени файлового поля.
• Char Width (Ширина в символах). Максимальное число символом, которые одновременно отображаются в файловом поле.
• Max Chars (Максимальное число символов). Максимальное число символов, которое разрешается ввести в файловое поле. Это число может быть больше, чем значение предыдущего поля. В этом случае просмотреть избыточные символы можно при помощи горизонтальной прокрутки.

Для правильной работы файлового поля требуется выполнение трех условий. Во-первых, сервер должен поддерживать загрузку анонимных файлов. Во-вторых, для всей формы следует установить метод передачи Post. В-третьих, в дескрипторе формы должен присутствовать кодовый фрагмент вида enctype="multipart/form-data".

11.8. Скрытое поле

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

Дайте команду Insert > Form Objects > Hidden Field (Вставка > Объекты формы > Скрытое поле). На гипертекстовой странице скрытое поле отображается в виде специального значка, который виден только в редакторе, но не отображается программами просмотра. Отображением этого символа специальной разметки управляет команда View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). Кодируется скрытое поле при помощи дескриптора <input>, например:

<input type="hidden" name="Имя_поля">

11.9. Обработка форм

Данные, собранные формой, могут обрабатываться на стороне клиента или на стороне сервера. Простейшие формы не требуют сложных алгоритмов--с их информационным обслуживанием способны справиться программы, действующие на стороне клиента. Для их программирования обычно используют языки JavaScript или VBScript, а программы на этих языках часто называют сценариями. Для развернутой, глубокой информационной обработки приходится привлекать более мощные программные средства, которые пишутся на полнофункциональных современных языках программирования, таких как Perl, Java, C++ и пр. Подобные программы работают на стороне сервера, поэтому данные формы приходится пересылать на его адрес. Пусть, например, создана простая форма, состоящая из двух переключателей со значениями Yes (Да) и No (Нет), и кнопки Submit (Отправка), которая обеспечивает пересылку данных. Будем считать, что с переключателями связаны разные сообщения, которые должны выводиться при щелчке на кнопке Submit (Отправка).

Эта простая задача решается при помощи короткой процедуры, написанной на языке JavaScript. Описание этой процедуры можно поместить непосредственно в раздел заголовков гипертекстового документа. Приведем возможный текст программы.

function processForm(){

if (document.forms[0].elements[0].checked){

alert("Yes");

}else{

alert("No");

}

}

Связать с формой эту функцию обработки можно следующим образом.

1. Выберите кнопку Submit (Отправка).
2. Откройте палитру Behaviors (Режимы) (SHIFT+F3).
3. Щелчком на кнопке со знаком + откройте меню, содержащее список доступных режимов работы объектов.
4. Выберите режим Call JavaScript (Вызов функции JavaScript).
5. В одноименном диалоговом окне введите имя функции обработки формы. В приведенном примере это имя processForm ().
6. Добавьте описание функции в раздел заголовков гипертекстового документа внутрь парного дескриптора <script>.

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

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

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

Программа CGI запускается сервером и работает в реальном масштабе времени. Сервер обеспечивает передачу запроса пользователя программе и возвращает результат ее работы на клиентский компьютер. Программы CCI пишутся на самых разнообразных языках программирования: С/С ++, Fortran, Perl, PHP,Java, Unix Shell и пр. Исполняемые модули таких программ, как правило, хранятся на сервере в каталоге cgi-bin.

11.10. Режимы работы форм

С объектами гипертекстового документа разрешается связывать специальные программы, которые вносят на страницу или в ее окружение динамические изменения. Они запускаются на выполнение при наступлении определенных событий, которыми могут быть щелчки мыши, наведение указателя, нажатие клавиш и пр. Это короткие программы, написанные, как правило, на языке JavaScript, называются в программе behaviors. Будем называть их динамическими сценариями или просто сценариями. Процедура присваивания сценария объекту гипертекстовой страницы довольно проста, все необходимые операции выполняются при помощи палитры Behaviors (Режимы) (SHIFT+F3).

Форме и ее структурным составляющим можно назначить разные динамические сценарии, но только два из них являются специализированными, поскольку предназначены для работы только с объектами данного типа. Это сценарии Validate Form (Проверить форму) и Set Text of Text Field (Поместить текст в поле). Первая процедура позволяет проверить правильность данных, введенных в форму, вторая процедура позволяет заполнить текстовое поле формы заданным содержимым.

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

Одним из самых полезных и часто применяемых структурных элементов форм является меню переходов (Jump Menu). Этот объект позволяет представить серию команд гипертекстового перехода в виде списка или меню. По способу кодирования и расположению в системе команд про граммы меню переходов представляет собой структурный элемент формы. Однако его “формообразующая природа” не является заметной для пользователя, который работает над созданием навигационной системы гипертекстового документа. По выполняемым функциям и тактике использования меню переходов напоминает скорее карту ссылок или систему навигационных кнопок. Поэтому работа с этими объектами рассмотрена в главе “Ссылки”.