Создание текстового окна

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

1. Установите курсор справа от текстового окна под строкой "Enter your comments in the space provided below:" и нажмите клавишу <Enter>.

2. Нажмите на панели инструментов кнопку Scrolling Text Box; после этого на странице появится новое текстовое окно.

3. Щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Form Field Properties. Вы увидите диалоговое окно Scrolling Text Box Properties (Свойства текстового окна), показанное на рис. 9.25.

Рис. 9.25. Диалоговое окно Scrolling Text Box Properties

4. В поле Name введите имя UserComments; это имя пригодится вам в дальнейшем, при настройке страницы подтверждения.

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

6. В поле Width in characters введите число 40, таким образом вы установите ширину текстового окна равной 40 символам. Чтобы впоследствии изменить размеры окна, достаточно будет просто зацепить в Редакторе маркер рамки окна и перетащить его в нужном направлении.

7. В поле Number of lines (Количество строк) поставьте число 5. Этот параметр устанавливает высоту текстового окна в строках, и пяти для начала вполне достаточно. Поскольку это окно является прокручиваемым, пользователь сможет ввести столько строк текста, сколько сочтет нужным, и устанавливать высоту окна больше 5 строк редко бывает целесообразно.

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

9. После того как вы закончите вводить информацию в диалоговом окне Scrolling Text Box Properties, нажмите кнопку ОК. То, что у вас получится, будет выглядеть примерно так, как показано на рис. 9.26.

Рис. 9.26. Пример создания текстового окна

Создание флажка

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

1. Установите курсор в конце строки Please contact me as soon as possible regarding this matter и нажмите комбинацию клавиш <Shift>+<Enter>; курсор перейдет на новую строку.

2. Нажмите на панели инструментов кнопку Check Box; на странице появится новый флажок.

3. Щелкните на этом флажке правой кнопкой мыши и выберите в контекстном меню пункт Form Field Properties; на экране возникнет диалоговое окно Check Box Properties, показанное на рис. 9.27.

Рис. 9.27. Диалоговое окно Check Box Properties

4. В текстовом поле Name введите имя Requestlnfo, в дальнейшем вы будете использовать его при конфигурировании страницы подтверждения.

5. В текстовом поле Value введите то же самое слово Requestlnfo. Присутствие этого значения в массиве информации, присланной формой обратной связи, означает, что флажок установлен, т. е. пользователь просит предоставить ему более подробную информацию.

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

7. Введя в диалоговом окне Check Box Properties все необходимые данные, нажмите кнопку ОК.

8. Поместите курсор справа от вставленного только что флажка, нажмите пробел, чтобы между ним и сопроводительным текстом был небольшой интервал, и наберите следующее предложение: Please send me more information via e-mail. (Пришлите мне, пожалуйста, по электронной почте дополнительную информацию.) Как будет выглядеть ваша страница после добавления в нее нового флажка, вы видите на рис. 9.28.

Рис. 9.28. Новый флажок на форме обратной связи

Подобным же способом вы можете создавать во Frontpage любые другие флажки.

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

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

1. Установите курсор после кнопки Clear Form в самом низу экрана и нажмите клавишу <Enter>.

2. Нажмите на панели инструментов кнопку Push Button.

3. Щелкните на новой кнопке правой кнопкой мыши и выберите в контекстном меню пункт Form Field Properties. Вы увидите диалоговое окно Push Button Properties (Свойства кнопки), показанное на рис. 9.29.

Рис.9.29. Диалоговое окно Push Button Properties

4. В текстовом поле Name оставьте предложенное имя В1. Когда вы будете использовать свои собственные обработчики форм, вы сможете указать здесь другое имя, на которое обработчик будет ссылаться при обработке формы, но пока что оставьте то имя, которое есть.

5. В текстовом поле Value/Label введите текст, который будет написан на кнопке: Submit Now (Отправить).

6. Установите переключатель Button Type в положение Submit. В этом случае кнопка будет служить для отправки введенной пользователем информации обработчику на Web-сервере. Если вы выберете опцию Reset (Сброс), то при нажатии такой кнопки форма будет возвращаться в исходное состояние. Опцию Normal следует устанавливать в том случае, если вы хотите назначить для обработки кнопки свой собственный скрипт.

7. После завершения ввода всех необходимых параметров нажмите кнопку ОК. Новая кнопка будет выглядеть так, как показано на рис. 9.30.

Рис. 9.30. Кнопка Submit Now

Альтернативные кнопки

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

Эти кнопки создаются с помощью команд меню следующим образом:

1. Установите курсор в то место, где должна будет находиться кнопка.

2. Выберите в меню Insert пункт Form Field и далее Image в меню. Появится диалоговое окно Image.

3. Выберите изображение в текущем открытом в Проводнике сайте, из файла на вашей машине или из Internet. Все о диалоговом окне Image уже было рассказано в главе 8.

4. Выбрав изображение, нажмите кнопку ОК; изображение появится на странице в качестве кнопки.

Щелкнув на нем правой кнопкой мыши и выбрав в контекстном меню Form Field Properties, вы попадете в диалоговое окно Image Form Field Properties, приведенное на рис. 9.31.

Рис. 9.31. Диалоговое окно Image Form Field Properties

Настройка свойств изображения осуществляется в уже знакомом нам диалоговом окне Image Properties. Для того чтобы попасть в это окно, нажмите в диалоговом окне Image Form Field Properties кнопку Image Properties. Для назначения обработчика нестандартной кнопки в окне Image Form Field Properties предусмотрена кнопка Form, при ее нажатии открывается диалоговое окно Form Properties.

Проверка полей форм

Frontpage предоставляет вам возможность проверки информации, введенной пользователем в форме, на корректность и соответствие определенным условиям. Например, вы можете задать минимальное или максимальное количество символов, которое должно содержать текстовое поле, указать, что в раскрывающемся списке обязательно должен быть выбран пункт и т. п. Процесс контроля соответствия содержимого поля формы определенным критериям носит название form field validation; в дальнейшем, за неимением точного русского синонима, мы будем называть его просто проверкой поля формы.

Чтобы задать для поля формы правила проверки, щелкните на поле правой кнопкой мыши и выберите в контекстном меню пункт Form Field Validation. Вы увидите диалоговое окно Validation, соответствующее проверяемому полю; так, например, текстовому полю соответствует диалоговое окно Text Box Validation, приведенное на рис. 9.32.

Рис. 9.32. Диалоговое окно Text Box Validation

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

В окна этого семейства можно попасть также по нажатию кнопки Validate в диалоговых окнах свойств соответствующих полей форм: текстового поля, текстового окна, переключателя и раскрывающегося списка.

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

Вид сообщения об ошибке проверки определяется на основе установок в диалоговом окне Проводника Frontpage Web Settings (это окно открывается по команде Web Settings в меню Tools Проводника). На вкладке Advanced этого диалогового окна в секции Validation Scripts (Скрипты проверки) вы сможете выбрать, какой язык будет использован для создания скрипта проверки. Если вы выберете VBScript или JavaScript, то сообщение об ошибке проверки будет выводиться в стандартном окне сообщения (message box). Если вы выберете <None>, то сообщение будет отображаться как HTML-страница. В обоих случаях, нажав кнопку или, соответственно, щелкнув по гиперссылке, пользователь сможет вернуться в форму и внести исправления.

Примечание:   Когда пользователь получает сообщение об ошибке, информация из формы не пересылается на Web-сайт; информация отправляется на сайт только в том случае, когда все введенные пользователем данные будут удовлетворять заданным правилам проверки.

Для раскрывающихся списков существует изящный прием: назовите первый элемент списка как-нибудь вроде "Pick One" (Выбери!). Во-первых, это напомнит пользователям о том, что здесь непременно следует сделать выбор; во-вторых, это поможет вам определить, действительно ли пользователь этот выбор сделал. Чтобы воспользоваться этим приемом, установите элемент "Pick One " выбранным по умолчанию. Другой метод состоит в выводе сообщения об ошибке проверки, если пользователь не выберет элемент из раскрывающегося списка; для этого сделайте элемент "Pick One" первым пунктом раскрывающегося списка и установите в диалоговом окне Drop-Down Menu Validation флажок Disallow First Item (Запретить первый пункт). Тогда пользователь, оставивший в раскрывающемся списке выбранным первый пункт, при попытке отослать вам форму сразу получит сообщение об ошибке.

Создание страницы подтверждения

На странице подтверждения (confirmation page) пользователю выводится информация о подтверждении некоторого действия. Например, она может служить для подтверждения того, что представленная пользователем информация принята сервером. Пользователям свойственно ошибаться; следовательно, страница подтверждения должна помочь им обнаружить ошибки и позволить исправить неверно введенные в форме данные. Помимо этого, страница подтверждения придаст вашему сайту профессиональный блеск.

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

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

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

1. Выберите в меню File Редактора пункт New, в диалоговом окне New на вкладке Page в списке шаблонов и мастеров выберите Confirmation Form (Форма подтверждения) и нажмите кнопку ОК.

2. Когда страница появится в Редакторе, сохраните ее в текущем сайте с названием Confirmation Form и дайте файлу имя confirmation. htm. Отныне, говоря о форме подтверждения, мы будем иметь в виду именно эту страницу; ее вид показан на рис. 9.33.

Как видите, форма подтверждения — это шаблон, готовый к настройке. Он разработан в расчете на использование совместно с шаблоном формы обратной связи и включает в себя многие из используемых в ней имен полей форм. Эти имена в Редакторе выводятся в квадратных скобках; в действительности они являются отдельными полями подтверждения.

Рис. 9.33. Страница Confirmation Form

Если вы проведете курсор над одним из этих компонентов, например, над компонентом, помеченным [UserName], вы увидите, что курсор примет вид маленького робота. Когда форма подтверждения предстанет в браузере перед пользователем, строка [UserName] будет заменена значением поля UserName, т. е. на его месте появится строка, введенная пользователем в качестве своего имени. Все поля подтверждения в этой форме работают аналогичным образом.

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

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

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