Видеокурсы, видео уроки, аудио, книги...

К учебнику по Microsoft FrontPage

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


Глава 22 Создание форм

Шаблоны и мастера для создания форм
Создание формы с помощью мастера
Редактирование объектов формы и определение их свойств
Текстовые объекты
Настройка объектов, размещенных в форме
Поле ввода
Поле ввода большой длины
Использование флажков в форме
Переключатель
Списки
Кнопки управления
Свойства формы

Вкладка Результаты в файл

Вкладка Отправка результатов по почте

Вкладка Страница подтверждения
Вкладка Сохраняемые поля
Настройка пользовательских обработчиков
Самостоятельная разработка формы
Инструменты, используемые для размещения в форме объектов
Разработка формы

Шаблоны и мастера для создания форм

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

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

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

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

Чтобы просмотреть список шаблонов и мастеров форм, предлагаемых программой FrontPage, в меню File (Файл) выберите команду Создать (New), а затем значение Страница или веб-узел (Page or Web). На появившейся панели Создание веб-страницы (Page or Web) выберите команду Шаблоны страниц (Page Templates). В результате на экране открывается аналоговое окно Шаблоны страниц, представленное на рис. 22.1. Оно содержит три вкладки. Шаблоны и мастера Web-страниц и форм расположены на вкладке Общие (General).

Рис. 22.1. Диалоговое окно Шаблоны страниц, содержащее шаблоны и мастера для создания формы

В табл. 22.1 представлен список шаблонов и мастеров форм, предоставляемых программой FrontPage.

Таблица 22.1. Шаблоны и мастера для создания форм

Форма подтверждения
(Confirmation Form)
Шаблон формы подтверждения о получении информации
Форма обратной связи
(Feedback Form)
Шаблон формы для ввода замечаний
Мастер страницы формы
(Form Page Wizard)
Мастер создания формы для опроса посетителей Web-узла. Позволяет сформировать список вопросов, на которые хотите получить ответы от клиентов
Гостевая книга
(Guest Book)
Шаблон гостевой страницы. Эта страница позволит посетителям вашего Web-узла оставить информацию о своих впечатлениях
Страница поиска
(Search Page)
Шаблон страницы в виде формы, используемой для поиска текста по документам Web-узла
Регистрационная форма
(User Registration)
Шаблон формы регистрации пользователей

Создание формы с помощью мастера

В списке шаблонов форм, предлагаемых программой FrontPage, присутствует мастер создания формы для опроса посетителей. Рассмотрим его работу. Чтобы создать форму с помощью мастера, выполните следующие действия:

1. Откройте Web-узел, в котором хотите разместить форму.
2. В меню Файл (File) выберите команду Создать (New), а затем — опцию Страница или веб-узел (Page or Web).
3. На появившейся панели Создание веб-страницы выберите команду Шаблоны страниц (Page Templates). В результате на экране открывается диалоговое окно Шаблоны страниц.
4. На вкладке Общие (General) дважды щелкните на значке Мастер страницы формы (Form Page Wizard).
5. Запускается мастер по созданию формы и появляется его первое окно. Ознакомьтесь с предложенной вашему вниманию информацией о назначении создаваемой с его помощью формы и нажмите кнопку Далее (Next).
6. Открывается диалоговое окно мастера (рис. 22.2), которое содержит область для размещения списка формируемых вопросов.

Окно мастера содержит кнопки:

Рис. 22.2. Диалоговое окно для формирования списка вопросов

7. В верхней части открывшегося диалогового окна содержится список тем, по которым можно формировать вопросы. Щелкните мышью на требуемом значении из этого списка. В области Описание (Description) появляется краткое описание полей, помещаемых в форму по выбранной теме. В поле Измените приглашение для этого вопроса (Edit the prompt for this question) предлагается вариант формируемого вопроса. Скорректируйте вопрос (рис. 22.3) и нажмите кнопку Далее.

Рис. 22.3. Диалоговое окно для выбора темы, по которой будет формироваться вопрос

8. Следующее диалоговое окно (рис. 22.4) предназначено для выбора полей, размещаемых в форме по сформированному вопросу. При установленном флажке ФИО (Name) становятся активными расположенные под ним опции, позволяющие указать, сколько полей будет создаваться для ввода имени посетителя. По умолчанию установлена опция полное имя (full), при которой для ввода имени предлагается одно поле. Установка второй и третьей опций приводит к тому, что для ввода имени выделяется два и три поля, соответственно. Например, если вы хотите, чтобы посетители вводили фамилию, имя и отчество в отдельных полях, установите опцию имя, фамилия, отчество (first, last, middle).

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

В поле Введите базовое имя для этой группы переменных (Enter the base name for this group of variables) указано наименование для группы переменных Contact. Оставьте его без изменения. Завершив установку параметров, нажмите кнопку Далее.

Рис. 22.4. Диалоговое окно для формирования списка полей

9. На следующем шаге мастера открывается диалоговое окно, показанное ранее на рис. 22.2. Только теперь оно в списке вопросов содержит первый сформированный вопрос. Для добавления в список нового вопроса нажмите кнопку Добавить (Add), сформируйте в следующих двух диалоговых окнах вопрос и выберите поля для ввода данных. 10. Повторяя шаги с 6 по 9, сформируйте список всех вопросов. Для модификации введенного ранее вопроса установите на него курсор и нажмите кнопку Изменить (Modify), а затем в открывшихся диалоговых окнах измените вопрос или формируемые по нему поля формы.
11. Сформировав список вопросов и полей формы, нажмите кнопку Далее.
12. Открывается диалоговое окно, позволяющее задать оформление формы (рис. 22.5). Оно содержит две группы опций и флажок.

Рис. 22.5. Диалоговое окно, содержащее параметры для оформления формы

Переключатель Выберите способ представления списка вопросов (How should the list of questions be presented) содержит опции, позволяющие задать вид оформления вопросов, содержащихся в форме:

Переключатель Создать оглавление для этой страницы? (Would you like a Table of Contents for this page?) содержит два значения. По умолчанию оглавление для страницы не создается. Если хотите создать оглавление, выберите значение Да.

При установленном флажке Использовать таблицы для полей формы (use tables to align form fields) выравнивание полей в форме осуществляется с помощью таблиц. Это более удобный способ выравнивания объектов формы, чем с использованием элементов форматирования, которые могут поддерживаться не всеми обозревателями.

Замечание

Если для выравнивания объектов используются таблицы, то в оформлении формы можно применять любые удобные шрифты.

Завершив установку необходимых параметров, перейдите к следующему шагу в работе мастера, нажав кнопку Далее.

13. Следующее диалоговое окно (рис. 22.6) позволяет указать, где сохранять вводимые в форму данные.

Рис. 22.6. Диалоговое окно для указания того, где сохранять вводимые данные

Установите одну из следующих опций:

При выборе первой или второй опции введите имя Web-страницы или текстового файла, соответственно, в поле Введите базовое имя для файла результатов (Enter the base name of the results file).

14. Ввод параметров завершен. Нажмите кнопку Готово (Finish). На экране появляется созданная с помощью мастера форма. Ее можно модифицировать, а затем использовать по назначению.
15. Сохраните созданную страницу формы. Для этого нажмите кнопку Сохранить (Save) на стандартной панели инструментов и в открывшемся диаюго-вом окне Сохранить как (Save As) введите наименование страницы.

На рис. 22.7 показана форма, созданная с помощью рассмотренного нами мастера.

 Рис. 22.7. Форма, созданная с помощью мастера

Редактирование объектов формы и определение их свойств

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

Текстовые объекты

Форма, как и любая Web-страница, содержит текст. Это — заголовок страницы, сформулированные вами вопросы, надписи к размешенным в форме объектам. Для форматирования текста, размещенного в форме, можно использовать панель инструментов форматирования и параметры диалогового окна Шрифт (Font) аналогично оформлению Web-страницы.

Для облегчения выравнивания объектов, размешенных в форме, можно использовать таблицы. При изменении надписей к полям происходит изменение их ширины. Если надпись находится в ячейке таблицы, то при этом автоматически изменяется размер ячейки. Для изменения размера ячейки можно также использовать мышь. Установите курсор на границу ячейки и, когда он примет вид двунаправленной стрелки, перемещайте в требуемую сторону до получения нужного размера. При размещении полей в столбец друг под другом, изменение размера одной из ячеек влечет за собой изменение всех расположенных под ней ячеек. Для выравнивания размещенных в таблице полей и текста можно использовать кнопки По левому краю (Align Left), По правому краю (Align Right), По ширине (Justify) и По центру (Center) на панели форматирования.

Настройка объектов, размещенных в форме

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

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

Поле ввода

Большинство полей, размещенных в форме с помощью мастера, — это поля ввода. На рис 22.7 полями такого типа являются поля для ввода имени посетителя и адреса URL. Поля данного типа можно использовать в формах для ввода как текстовой, так и числовой информации.

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

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

Дважды щелкните на поле мышью. Открывается диалоговое окно Свойства текстового поля (Text Box Properties), представленное на рис. 22.8.

Рис. 22.8. Диалоговое окно Свойства текстового поля

Диалоговое окно содержит следующие поля:

Замечание

Поле Ширина в знаках (Width in characters) не задает максимальное количество символов, вводимое в поле ввода, а определяет ширину поля в форме. Для определения максимального количества символов, вводимых в поле данных, используется поле Макс, длина (Max Length) диалогового окна Проверка текстового поля (Text Box Validation). Если количество символов, введенное в поле, превышает ширину поля, информация прокручивается.

Переключатель Поле пароля (Password field) позволяет указать, будет ли данное поле использоваться для ввода пароля. Большинство обозревателей в этом поле отображают только символы *, скрывая хранимый в поле текст.

В нижней части диалогового окна находится кнопка Проверить (Validate), при нажатии на которую открывается диалоговое окно Проверка текстового поля (Text Box Validation) (рис. 22.9), позволяющее ввести ограничения на вводимые в это поле данные, чтобы не возникало ошибок при их обработке.

Рис. 22.9. Диалоговое окно Проверка текстового поля

Поле Выводимое имя (Display name) содержит название поля формы, которое будет выводиться на экране для сообщения об ошибке ввода в данное поле. Раскрывающийся список Тип данных (Data type) позволяет указать тип данных, вводимых в поле:

Значение списка Тип вводимых данных
Без ограничений
(No Constraints)
Позволяет вводить данные любого типа
Текст (Text) Используется для ввода текстовой информации. Вводимые цифры будут рассматриваться как символы
Целое (Integer) Предназначено для ввода целых чисел. Помимо целых чисел, допустимыми являются запятая и тире. Например: 35, 56 или 35-56
Число (Number) Используется для ввода десятичных чисел

При выборе из раскрывающегося списка Тип данных значения Текст (Text) становятся доступными флажки области Формат текста (Text format), определяющие допустимые для ввода символы:

При выборе из раскрывающегося списка Тип данных значения Число (Number) становятся доступными две группы переключателей. Первый из них, Группировка (Grouping), позволяет задать символы для разделения разрядов числа, а второй — Разделитель (Decimal), — символы для разделения целой и дробной части числа. Установленная опция нет (None) переключателя Группировка указывает на отсутствие разделителей.

Предупреждение

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

Поля Мин. длина (Min length) и Макс, длина (Max Length) области Размер данных (Data length) позволяют указать минимальное и максимальное количество символов, отводимых для ввода данных. Чтобы ввести эти параметры, необходимо предварительно установить флажок Требуется (Required).

Замечание

Если для поля в диалоговом окне Проверка текстового поля установлен флажок Требуется, то вводить в него данные обязательно. Если при вводе информации в форму это поле будет пропущено, то появится сообщение об ошибке с указанием наименования поля.

Параметры области Значение данных (Data value) позволяют указать критерии проверки данных, вводимых в поле . Значение, введенное в поле Значение (Value), используется для сравнения с вводимыми в поле данными, а раскрывающиеся списки содержат значения критерия проверки.

Совет

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

Поле ввода большой длины

Программа FrontPage позволяет использовать в форме поля для ввода большого объема текстовой информации. Поле данного типа может занимать несколько строк и содержит полосы прокрутки для просмотра не поместившейся в нем информации. Примером такого поля на рис. 22.10 является поле Примечание.

Откройте окно свойств данного объекта формы, дважды щелкнув на нем мышью. На экране откроется диалоговое окно Свойства текстового поля (TextArea Box Properties), представленное на рис. 22.11. Оно аналогично диалоговому окну свойств поля для ввода данных, рассмотренного ранее, но содержит дополнительное поле Число строк (Number of lines), позволяющее указать высоту поля (в строках). Поле Ширина в знаках (Width in characters) указывает ширину поля в символах.

Рис. 22.10. Форма, содержащая поле для ввода большого объема текстовой информации

Рис. 22.11. Диалоговое окно Свойства текстового поля

В нижней части диалогового окна Свойства текстового поля расположена кнопка Проверить (Validate). При ее нажатии открывается диалоговое окно Проверка текстового поля (см. рис. 22.9), аналогичное тому, которое используется для ввода ограничений на вводимые данные поля ввода, рассмотренного выше. Чтобы изменить размеры текстового поля большой длины, можно использовать курсор. Выделите поле. Вокруг него появятся маркеры выделения. Для изменения высоты или ширины поля применяются маркеры, расположенные на соответствующих сторонах. Для изменения одновременно ширины и высоты предназначены маркеры, которые находятся по углам рамки выделения объекта.

Использование флажков в форме

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

 Флажок сброшен

 Флажок установлен

Откройте окно свойств флажка Свойства флажка (Check Box Properties) (рис. 22.12). Оно содержит переключатель Начальное состояние (Initial state), указывающий, в каком состоянии будет находиться флажок при загрузке формы (установленном или сброшенном). По умолчанию установлена опция Снят (Not checked), т. е. в начальном состоянии флажок будет сброшен.

Рис. 22.12. Диалоговое окно Свойства флажка

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

При проведении опроса среди посетителей Web-узла не стоит заставлять их вводить информацию во множество полей. В этом случае, скорее всего, они опрос просто проигнорируют. Чтобы узнать мнение посетителя по тому или иному вопросу, не заставляя вводить информацию, удобно в форме использовать переключатели, содержащие опции с вариантами предполагаемых ответов. В этом случае требуется минимальное время на ввод информации. Посетитель просматривает предложенные вами варианты ответов и выбирает нужный, установив соответствующую опцию. Переключатель является составным объектом, так как в него входит несколько опции. Для настройки свойств переключателя используются диалоговые окна Свойства переключателя (Option Button Properties) каждой опции, из входящих в его состав. Вил этого диалогового окна показан на рис. 22.13.

Рис. 22.13. Диалоговое окно Свойства переключателя

Поле Имя группы (Group name) содержит групповое имя опций переключателя. Оно должно быть одинаковым для всех опций, входящих в состав данного переключателя.

Поле Значение (Value) содержит значение, которое будет использоваться при установке данной опции.

Переключатель Начальное состояние (Initial stale) диалогового окна Свойства переключателя указывает, будет ли установлена данная опция по умолчанию при загрузке формы.

Замечание

В переключателе, размещенном в форме, одна из опций (наиболее вероятный вариант ответа) должна иметь в диалоговом окне Свойства переключателя установленное значение Выбран (Selected), а остальные— Не выбран (Not selected).

Списки

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

Для настройки свойств списка используется диалоговое окно Свойства раскрывающегося списка, показанное на рис. 22.14.

В поле Имя (Name) отображается имя списка. В расположенной под этим полем области содержатся элементы списка.

Рис. 22.14. Диалоговое окно Свойства раскрывающегося списка

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

Кнопка Назначение
Добавить (Add) Открывает диалоговое окно Добавление варианта

(Add Choice) для добавления в список нового элемента

Изменить (Modify) Открывает диалоговое окно Изменение выбора

(Modify Choice) для изменения выбранного элемента списка

Удалить (Remove) Удаляет из списка выделенный элемент
Вверх (Move Up) Перемещает выделенный элемент списка на один уровень вверх
Вниз (Move Down) Перемещает выделенный элемент списка на один уровень вниз

 

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

Ширина списка устанавливается автоматически и определяется длиной самого длинного элемента списка. Переключатель Разрешен выбор нескольких элементов (Allow multiple selections) определяет, разрешить ли выбор из списка нескольких значений. По умолчанию установлена опция Нет. Значение Да удобно использовать, например, в том случае, если вы предлагаете для продажи список товаров, и покупатель может выбрать более одного вида товара.

Для ввода в список нового элемента нажмите кнопку Добавить (Add). Открывается диалоговое окно Добавление варианта (Add Choice), показанное на рис. 22.15. Введите в поле Вариант (Choice) наименование элемента. Для ввода значения, присваиваемого элементу списка (по умолчанию оно совпадает с наименованием элемента), установите флажок Значение (Specify Value) и введите в расположенное под ним поле требуемое значение.

Рис. 22.15. Диалоговое окно Добавление варианта, предназначенное для добавления нового элемента в список

По умолчанию при просмотре списка в обозревателе курсор установлен на его первом элементе. Если вы хотите, чтобы сразу выбирался добавляемый вами элемент, установите для него в диалоговом окне Добавление варианта опцию выбрано (Selected). При этом будет автоматически снята данная опция для остальных элементов списка.

В нижней части диалогового окна Свойства раскрывающегося списка размещена кнопка Проверить (Validate), при нажатии которой открывается диалоговое окно Проверка раскрывающегося списка (Drop-Down Box Validation) (рис. 22.16).

Рис. 22.16. Диалоговое окно Проверка раскрывающегося списка

Если вы хотите, чтобы пользователь обязательно выбирал из списка какой-либо элемент, установите флажок Данные обязательны (Data Required).

Флажок Запретить выбор первого элемента (Disallow Hist choice) не разрешает выбирать пользователю первым пункт списка. Данный флажок устанавливают в том случае, кона первый пункт списка — это рекомендация или замечание.

Кнопки управления

Кнопки, размещаемые в форме, позволяют выполнять заданное действие. Посмотрите на форму, созданную мастером. В ее нижнем части расположены две кнопки: Отправить (Submit Form) и Сброс (Reset Form). Кнопка Отправить предназначена для пересылки введенных в форму данных обработчику на Web-сервер. Кнопка Сброс возвращает форму в исходное состояние. при котором можно приступить к вводу данных. Дважды щелкните мышью на кнопке Отправить. Открывается диалоговое окно Свойства кнопки (Push Button Properties), показанное на рис. 22.17.

Рис. 22.17. Диалоговое окно Свойства кнопки

Поле Имя (Name) предназначено для ввода имени объекта. Расположенное под ним поле Значение или подпись (Value/label) используется для ввода текста, который будет отображаться на кнопке. Иными словами, это наименование кнопки.

Переключатель Тип кнопки (Button type) позволяет задать действие, выполняемое при нажатии кнопки, и содержит следующие опции:

Свойства формы

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

Для открытия диалогового окна Свойства формы (Form Properties) выполните одно из следующих действий:

Рис. 22.18. Диалоговое окно Свойства формы

Диалоговое окно Свойства формы разделено на две области. Верхняя область Сохранение результатов (Where to store results) позволяет указать, где будут храниться данные, введенные в форму. В ней находятся следующие три опции:

Замечание

Для использования этой опции вы предварительно должны установить на Web-сервере FrontPage Server Extensions.

Замечание

Скрипты ISAPI, NSAPI, CGI и ASP являются программными компонентами, размещенными на Web-сервере и предназначенными для обработки данных, получаемых из формы.

Одноименная область диалогового окна Свойства формы (Form Properties) содержит два поля. Поле Имя формы (Form name) содержит имя формы, которое может быть использовано обработчиком. Поле Конечная рамка (Target frame) позволяет указать конечный фрейм, в котором будут отображаться данные из формы.

В нижней части диалогового окна Свойства формы расположена кнопка Параметры (Options), открывающая диалоговое окно Сохранение результатов (Saving Results), показанное на рис. 22.19. Оно содержит 4 вкладки. Рассмотрим параметры, настраиваемые с помощью этого окна.

Рис. 22.19. Диалоговое окно Сохранение результатов

Вкладка Результаты в файле

Вкладка Результаты в файле (File Results) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.19, позволяет задать параметры файла, в который записываются данные, введенные в форму.

В верхней части вкладки размешено поле Имя файла (File name), позволяющее указать наименование Web-страницы или текстового файла, в которых данные сохраняются, и их расположение. Чтобы легче было вводить информацию в это поле, можно использовать кнопку Обзор (Browse) и открываемое ею диалоговое окно Текущий веб-узел (Current Web).

Замечание

Если указанный в этом поле файл не существует, при сохранении данных он будет создан программой FrontPage.

Раскрывающийся список Формат файла (File format) и расположенные под ним флажки Включить имена полей (Include field names) и Последние результаты в конце (Latest results at end) определяют формат файла и вид отображения размещенных в нем данных.

Используя список Формат файла, можно задать форматы файла, представленные в табл. 22.2.

Таблица 22.2. Доступные форматы для файла, содержащего данные, введенные в форму

Формат файла Описание
HTML (HTML)  Файл в формате HTML, представленный в виде обычного текста 
Список определений HTML
(HTML definition list) 
Файл в формате HTML, в котором данные из формы оформляются в виде списка определений 
Маркированный список HTML
(HTML bulleted list) 
Файл в формате HTML, в котором данные из формы оформляются в виде маркированного списка 
Форматированный текст в HTML
(Formatted text within HTML) 
Файл в формате HTML, в котором данные из формы оформляются в виде форматированного текста 
Текстовый (разделитель запятая)
(Text database using comma as a separator) 
Данные оформляются в виде одной или двух строк текста, в которой элементы списка взяты в кавычки и разделены запятой. Количество строк зависит от того, установлен ли флажок Включить имена полей (Include field names). При установленном флажке в первой строке размещены названия полей формы, а во второй — их значения. Если флажок не установлен, то формируется одна строка, содержащая значения, вводимые в поля формы 
Текстовый (разделитель знак табуляции)
 (Text database using tab as a separator) 
Формат аналогичен формату, заданному значением Текстовый (разделитель запятая), но в качестве разделителей элементов списка используется табуляция 
Текстовый (разделитель пробел)
(Text database using space as a separator) 
Данный формат аналогичен формату, заданному значением Текстовый (разделитель запятая), только в качестве разделителей элементов списка используется пробел 

Установленный флажок Включить имена полей (Include field names) указывает на необходимость включения в файл не только данных, вводимых в форму, но и названия полей.

При установке флажка Последние результаты в конце (Latest results at end) добавляемая информация размещается в конце файла.

Замечание

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

Параметры области Дополнительный файл (Optional second file) аналогичны параметрам, размещенным в верхней части вкладки, и используются в том случае, если вы хотите записывать данные параллельно в два различных файла.

Вкладка Отправка результатов по почте

Вкладка Отправка результатов по почте (E-mail Results) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.20, позволяет задать параметры, используемые для передачи по электронной почте данных, которые были введены в форму.

В верхней части вкладки размещено поле Адрес для получения результатов (E-mail address to receive results), позволяющее указать электронный адрес, по которому будут отправляться введенные в форму данные.

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

Установленный флажок Включить имена полей (Include field names) указывает на необходимость включения в почтовое сообщение не только данных, вводимых в форму, но и названия нолей.

Рис. 22.20. Вкладка Отправка результатов по почте диалогового окна Сохранение результатов

Область Заголовок сообщения (E-mail message header) содержит два поля следующего назначения:

Совет

Если среди полей формы присутствует адрес электронной почты посетителя, то значение этого поля удобно использовать в качестве обратного адреса.

Вкладка Страница подтверждения

Вкладка Страница подтверждения (Confirmation Page) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.21, позволяет задать параметры, используемые для настройки формы подтверждения. Вкладка содержит для поля:

Рис. 22.21. Вкладка Страница подтверждения

Замечание

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

Вкладка Сохраняемые поля

Вкладка Сохраняемые поля (Saved Fields) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.22, содержит список всех полей формы, предлагая сохранить порядок их расположения. Вы можете задать иной порядок.

Раскрывающиеся списки области Дата и время (Date and time) позволяют включить в формируемый файл дату и время заполнения формы в любом из предложенных форматов. Область Дополнительные сохраняемые сведения (Additional information to save) содержит три флажка, перечисленных ниже, при установке которых в файл будет включена следующая информация:

Рис. 22.22. Вкладка Сохраняемые поля диалогового окна Сохранение результатов

Настройка пользовательских обработчиков

При использовании в Web-узле обработчиков ISAPI, NSAP1, CG1 или ASP для настройки их свойств используется диалоговое окно Параметры обработчика форм (Options for Custom Form Handler).

Для открытия диалогового окна Параметры обработчика форм выполните следующие действия:

1. Откройте диалоговое окно свойств формы Свойства форм (Form Properties), выбрав в контекстном меню одноименную команду.
2. В области Сохранение результатов (Where to store results) установите опцию В другом месте (Send to other). В расположенном справа списке по умолчанию установлено значение Настраиваемый сценарий ISAPI, NSAPI, CGI или ASP (Custom ISAPI, NSAPI, CGI or ASP script ). Оставьте это значение.
3. Нажмите кнопку Параметры (Options), расположенную в нижней части окна.

Поле Действие (Action) диалогового окна предназначено для ввода URL адреса обработчика формы.

Раскрывающийся список Метод (Method) позволяет указать метод передачи данных обработчику и содержит два значения:

По умолчанию предполагается, что при кодировании данных формы, передаваемых обработчику, используется метод appiication/x-www-form-urlencoded. Если вы хотите использовать иной метод кодирования, введите его название в поле Тип кодировки (Encoding type).

Завершив в диалоговом окне Параметры обработчика форм (Options for Custom Form Handler) ввод всех параметров, нажмите кнопку ОК.

Самостоятельная разработка формы

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

Инструменты, используемые для размещения в форме объектов

Для размещения в форме объектов используются команды (рис. 22.23), появляющиеся при выборе из меню Вставка (Insert) команды Форма (Form). Назначение этих команд описано в табл. 22.3.

Рис. 22.23. Команды, используемые для создания формы

Таблица 22.3. Команды меню Форма

Команда Назначение
Поле (Textbox)  Создает в форме поле для ввода данных разных типов, содержащее одну строку 
Текстовое поле
(Text Area) 
Создает поле большого размера, занимающее несколько строк и содержащее полосу прокрутки для просмотра информации, не поместившейся в поле 
Поле отправки файла
(File Upload) 
Создает в форме поле для ввода названия и расположения файла. Расположенная справа кнопка Обзор (Browse) открывает диалоговое окно Выбор файла, используемое для выбора файла с диска 
Флажок (Checkbox)  Создает флажок 
Переключатель
(Option Button) 
Используется для размещения в форме опции 
Группа (Group Box)  Создает в форме рамку, предназначенную для объединения объектов в группу 
Раскрывающийся список
(Drop-Down Box) 
Создает в форме список 
Кнопка
(Push Button) 
Создает кнопку управления, предназначенную для выполнения заданных действий 
Расширенная кнопка
(Advanced Button) 
Создает кнопку управления, предназначенную для выполнения заданных действий и имеющую расширенный набор свойств 
Рисунок (Picture)  Размещает в форме графическое изображение 
Надпись (Label)  Создает метку к полю в виде надписи. После щелчка на ней происходит то же самое, что и при установке объекта, для которого она создана. Например, если вы создали метку для флажка, то для установки флажка можно щелкать как на самом флажке, так и на метке 
Свойства формы
(Form Properties) 
Открывает диалоговое окно Свойства формы для настройки свойств формы 

Разработка формы

Рассмотрим создание формы, в которой разместим по возможности большинство предлагаемых программой FrontPage объектов. После создания форма будет иметь вид, показанный на рис. 22.24.

1. Откройте Web-узел, в который хотите вставить страницу формы.
2. Добавьте в него страницу, имеющую шаблон Обычная страница (Normal Page).
3. Введите в верхней части новой Web-страницы заголовок
Форма опроса посетителей Web-узла.
4.
Чтобы разместить в форме поле для ввода фамилии посетителя, установите курсор на следующую после заголовка строку и в меню Вставка (Insert) выберите команду Форма (Form), а затем — опцию Поле (Textbox). На странице появляется пунктирный контур, определяющий область формы. Внутри контура расположено поле ввода и две кнопки Отправить (Submit) и Сброс (Reset) (рис. 22.25). Кнопка Отправить позволяет отправить обработчику введенные в форме данные, а кнопка Сброс переводит форму в исходное состояние.
5. Увеличьте область формы, чтобы в ней можно было разместить все необходимые объекты. Для этого установите курсор между полем и кнопками и несколько раз нажмите клавишу <Enter>.

Рис. 22.24. Созданная форма

Рис. 22.25. Область для создания формы после размещения на Web-странице первого поля

6. Введите в верхней части формы текст Введите, пожалуйста, о себе следующую информацию:.
7. Для выравнивания объектов формы удобно использовать таблицу. Создайте в верхней части формы таблицу, состоящую из двух строк и двух столбцов.
8. Перенесите поле ввода, размещенное в форме, во вторую ячейку первой строки таблицы. Для этого установите на поле курсор, нажмите кнопку мыши и, удерживая ее нажатой, перенесите поле в требуемое место. Затем отпустите кнопку мыши.
9. Для открытия окна свойств поля дважды щелкните на нем мышью.

10. В поле Имя (Name) открывшегося диалогового окна
Свойства текстового поля (Text Box Properties) введите наименование поля Lastname. Задайте также ширину поля, предназначенного для ввода фамилии, введя 25 в поле Ширина в знаках (Width in characters). Нажмте кнопку OK для закрытия диалогового окна.
11. В первой ячейке первой строки таблицы введите начнись к полю Фамилия.
12. В первом ячейке второй строки введите надпись ко второму полю Возраст.
13. Для создания поля, позволяющего вводить возраст посетителя, установите курсор во вторую ячейку второй строки таблицы и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Поле (Textbox).
14. Чтобы настроить свойства созданного поля, дважды щелкните на нем мышью.
15. В поле Имя (Name) открывшегося диалогового окна Свойства текстового поля (Text Box Properties) введите наименование поля Age, а в поле Ширина в знаках (Width in characters) цифру 3, определяющую ширину ноля в символах.
16. Для настройки параметров, вводимых в поле данных, в диалоговом окне Свойства текстового поля нажмите кнопку Проверить (Validate). Так как в поле будут вводиться только целые числа, в списке Тип данных (Data type) открывшегося диалогового окна Проверка текстового поля (Text Box Validation) (см. рис. 22.9) выберите значение Целое (Integer). Установите флажок Требуется (Required) и в поля Мин. длина (Min length) и Макс, длина (Max length) введите цифры 1 и 3, определяющие минимальное и максимальное количество символов, отводимых для ввода возраста посетителя. Завершив настройку параметров поля, нажмите кнопку ОК.
17. Теперь разместим в форме переключатель, содержащий две опции, с помощью которых посетитель сможет указать свой пол. Для этого установите курсор в строку, находящуюся ниже таблицы, и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Переключатель (Option Button).
18. Откройте окно свойств опции Свойства переключателя (Option Button Properties).
19. В поле Имя группы (Group name) введите наименование группы опций M_W, а в поле Значение (Value) — значение опции Мужской. Нажмите кнопку ОК для закрытия диалогового окна.
20. Введите с правой стороны созданной опции надпись к полю: Мужской.
21. Сделайте несколько пробелов и разместите рядом с первой опцией вторую.
22. В окне свойств опции введите наименование группы M_W, а в поле Значение (Value) — значение опции Женский.

23. С правой стороны опции введите надпись к полю Женский.
24. Установите курсор в следующую строку и введите текст Что Вам понравилось в нашем Web-узле?
25. Разместим теперь под текстом список, с помощью которого попытаемся узнать у посетителя, что ему понравилось в нашем Web-узле. Установите курсор в место предполагаемого размещения списка и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Раскрывающийся список (Drop-Down Box).
26. Дважды щелкните на созданном объекте. Откроется диалоговое окно Свойства раскрывающегося списка (Drop-Down Box Properties). В поле Имя (Name) введите наименование списка. Используя кнопку Добавить (Add) и открываемое ее диалоговое окно, сформируйте список возможных вариантов ответа. Установите опцию Да переключателя Разрешен выбор нескольких элементов (Allow multiple selections), чтобы разрешить пользователю выбрать из списка несколько значений. Чтобы все элементы списка были видны, введите в поле Высота (Height) число 4. Диалоговое окно Свойства раскрывающегося списка с установленными параметрами показано на рис. 22.26. Закройте диалоговое окно, нажав кнопку ОК.

Рис. 22.26. Диалоговое окно Свойства раскрывающегося списка, в котором установлены необходимые параметры

Совет

Для настройки шрифта, используемого в оформлении списка, можно воспользоваться диалоговым окном, открываемым при нажатии кнопки Стиль (Style).

27. Разместим рядом со списком поле ввода большой длины. Вдруг пользователь захочет свои впечатления о Web-узле или пожелания ввести в произвольной форме. Для размещения поля данного типа в форме выберите в меню Вставка (Insert) команду Форма (Form), а затем — огшию Текстовое поле (Text Area).
28. Откройте окно свойств Свойства текстового поля (TextArea Box Properties) созданного объекта.
29. В поле Имя (Name) введите наименование поля Comment. В поле Ширина в знаках (Width in characters) укажите ширину поля в символах, введя число 20, а в поле Число строк (Number of lines), позволяющее указать высоту поля в строках, — число 4. Закройте диалоговое окно, нажав кнопку ОК.
30. Все объекты размешены в форме. Откройте диалоговое окно свойств формы. Для этого в меню Вставка (Insert) выберите команду Форма (Form), а затем значение Свойства формы (Form Properties).
31. По умолчанию в диалоговом окне Свойства формы установлена опция Отправка (Send to), а в поле Имя файла (File name) указан текстовый файл, сохраняемый в папке private Web-узла. Посмотрите имя файла, чтобы знать, где искать введенные в форму данные.
32. Нажмите кнопку Параметры (Options). Открывается диалоговое окно Сохранение результатов. На вкладке Результаты в файле (File Results) в списке Формат файла (File format) выбрано значение Текстовый (разделитель — запятая) (Text database using comma as a separator). Если требуется, измените формат данных, записываемых в текстовый файл.
33. Для размещения в файле даты заполнения формы откройте вкладку Сохраняемые поля (Saved Fields) диалогового окна Сохранение результатов (Saving Results) и, используя список Формат даты (Date Format), выберите устраивающий вас формат даты.
34. Нажмите кнопку ОК для закрытия диалогового окна свойств формы.
35. Сохраните Web-страницу, содержащую форму. Создание формы завершено.


Реклама: