Как создавать формы

»  » 

Картинка к странице

Содержание

Что такое форма

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

Как сделать форму

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

Установите текстовый курсор на страничке в позицию, куда будет помещена форма, и изберите в меню команду Вставка - Форма - Форма (Insert - Form - Form). На страничку будет помещена форма.

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

Чтобы прирастить размер формы, добавьте в нее строчки, нажав пару раз кнопку Enter.

Как сделать поле ввода

Установите текстовый курсор внутри формы и изберите в меню команду Вставка - Форма - Поле (Insert - Form - Textbox). На форму будет помещено поле ввода.

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

Установите текстовый курсор в строке над полем ввода на форме и введите заголовок поля Фамилия Имя Отчество.

Щелкните правой кнопкой мыши на поле ввода и в показавшемся контекстном меню изберите команду Характеристики поля формы (Form Field Properties). На дисплее появится диалог Характеристики текстового поля (Text Box Properties).

В поле Имя (Name) укажите имя поля формы, к примеру ClientName.

Имя поля не отображается на форме, а является внутренним идентификатором, который применяется при сохранении значений поля в файле либо базе данных. В поле ввода Изначальное значение (Initial Value) можно указать текст, который будет находиться в поле по умолчанию. Поле Ширина в знаках (Width in characters) определяет ширину видимой области поля ввода. Если в группе переключателей Поле пароля (Password field) установить переключатель Да (Yes), то вводимый текст будет отображаться в виде звездочек.

Нажмите кнопку Проверить (Validate). На дисплее появится диалог Проверка текстового поля (Text Box Validation).

Как задать правила ввода данных для поля формы

В этом диалоге можно найти правила ввода данных для элемента формы. Правила ввода устанавливают ограничения на формат данных и позволяют предупредить ввод неправильной информации. Для текстового поля имеет смысл установить малое (Min length) и наибольшее (Max length) количество знаков в группе частей управления Длина данных (Data length). К примеру, имя клиента можно ограничить интервалом от 5 до 50 знаков.

В открывающемся перечне Тип данных (Data type) можно избрать тип поля и потом найти допустимый набор знаков в группе частей управления Формат текста (Text format) и Формат чисел (Numeric Format). К примеру, для ввода телефонного номера разрешить использовать только числа, скобки и дефис.

В поле ввода Выводимое имя (Display name) указывается имя поля, которое будет выводиться в сообщении в случае нарушения установленных правил.

Нажмите кнопку ОК. Вы вернетесь к диалогу Характеристики текстового поля (Text Box Properties).

Нажмите кнопку OK, чтобы закрыть диалог и сохранить конфигурации.

Как сделать открывающийся перечень

Установите текстовый курсор на последующую строчку формы и введите заголовок для последующего элемента Страна.

Изберите в меню команду Вставка - Форма - Раскрывающийся перечень (Insert - Form - Drop-Down Menu). На форму будет помещен открывающийся перечень.

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

Щелкните правой кнопкой мыши на открывающемся перечне на форме и в показавшемся контекстном меню изберите команду Характеристики поля формы (Form Field Properties). На дисплее появится диалог Характеристики раскрывающегося перечня (Drop-Down Box Properties).

В поле Имя (Name) укажите имя поля формы, к примеру Destination.

Нажмите кнопку Добавить (Add). На дисплее появится диалог Добавление варианта (Add Choice).

В поле ввода Вариант (Choice) укажите заглавие элемента перечня, к примеру Великобритания.

Если установить флаг Значение (Specify Value), то в поле ввода под флагом можно указать значение, которое будет передаваться заместо избранного наименования. При сброшенном флаге значение эквивалентно наименованию элемента перечня. Переключатели Изначальное состояние (Initial State) определяют, будет ли данный элемент избран по умолчанию.

Нажмите кнопку ОК. Диалог Добавление варианта (Add Choice) закроется, и введенный элемент будет добавлен в перечень в центральной части диалога Характеристики раскрывающегося перечня

(Drop-Down Menu Properties).

Расположите в перечень другие вероятные значения для открывающегося перечня.

При помощи кнопок в правой части диалога можно изменять, удалять и перемещать элементы перечня. Если в поле ввода Высота (Height) указать значение больше единицы, то открывающийся перечень будет смотреться как обыденный перечень. Для обыденного перечня можно дать возможность выбора сразу нескольких частей при помощи мыши и кнопки Ctrl, установив переключатель Да (Yes) в группе переключателей Разрешить выбор нескольких частей (Allow multiple selection). Нажав кнопку Проверить (Validate), можно найти правила ввода для открывающегося перечня. Они проще, чем правила для текстового поля ввода.

Нажмите кнопку OK, чтобы закрыть диалог Характеристики раскрывающегося перечня (Drop-Down Menu Properties) и сохранить конфигурации.

Как сделать Check Box

Установите текстовый курсор на последующую строчку формы и изберите в меню команду Вставка - Форма - Флаг (Insert - Form - Check Box). На форму будет помещен флаг.

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

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

Щелкните правой кнопкой мыши на флаге и в показавшемся контекстном меню изберите команду Характеристики поля формы (Form Field Properties). На дисплее появится диалог Характеристики флага (Check Box Properties).

В поле Имя (Name) укажите имя поля формы, к примеру TwoWayTicket.

В поле ввода Значение (Value) укажите значение, которое будет передаваться в качестве результата при установленном флаге, к примеру Да.

Переключатели Изначальное значение (Initial Value) определяют, будет ли флаг по умолчанию установлен (Checked) либо сброшен (Unchecked).

Нажмите кнопку ОК, чтобы закрыть диалог Характеристики флага (Check Box Properties) и сохранить конфигурации.

Изменение текста на кнопках

Чтобы поменять текст на кнопке Выслать (Submit), щелкните правой кнопкой мыши на кнопке и в показавшемся контекстном меню изберите команду Характеристики поля формы (Form Field Properties). На дисплее появится диалог Характеристики кнопки (Push Button Properties).

Введите новый текст, к примеру Заказать, в поле ввода Значение либо подпись (Value/label) и нажмите кнопку ОК.

Точно так же вы сможете поменять текст на кнопке Сброс (Reset) на более понятный, к примеру Очистить поля.

Сохраните страничку и запустите браузер, выбрав в меню команду Файл - Просмотр в обозревателе (File - Preview in Browser). В браузере будет отображена страничка с формой.

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

На форму можно поместить еще ряд частей, имеющихся в меню Вставка - Форма (Insert - Form). Это Текстовое поле (Text Area) для ввода длинноватого текста, Переключатель (Option Button) для выбора одного из нескольких вариантов. Кнопка (Push Button) для выполнения какого-нибудь деяния и другие.

Поглядите без помощи других, как работают данные элементы, какие имеют характеристики и правила ввода данных.

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

Обработка заполненной формы

После того как гость web сайта нажмет кнопку Заказать (Submit), нужно получить данные из заполненной формы - результаты формы - и сохранить их для следующей обработки. В программке FrontPage существует несколько методов обработки результатов формы.

Щелкните правой кнопкой мыши в хоть какой области формы и в показавшемся контекстном меню изберите команду Характеристики формы (Form Properties). На дисплее появится диалог Характеристики формы (Form Properties).

При помощи группы частей управления Сохранение результатов (Where to store results) определяется метод сохранения результатов формы. По умолчанию установлен переключатель Отправка (Send to). Это означает, что приобретенные данные могут быть сохранены в текстовом файле, обозначенном в поле Название файла (File name), либо высланы по электрической почте по адресу, обозначенному в поле Адресок почты (E-mail address).

Нажмите кнопку Характеристики (Options). На дисплее появится диалог Сохранение результатов (Saving Results).

В этом диалоге можно настроить разные характеристики сохранения результатов в файле либо письме. На вкладке Запись результатов (File Results) можно избрать Формат файла (File format). Это может быть текстовый файл с разными видами разделителей либо файл в формате HTML. Тут же можно указать дополнительный файл для результатов. Такая возможность комфортна, к примеру, если требуется приготовить один итог для сохранения в базе данных, а другой - для отображения на страничке.

На вкладке Отправка результатов по почте (E-mail Results) можно избрать Формат электрической почты (E-mail format), указать тему письма (Subject line) и подставить отправителя (Reply-to line).

На вкладке Страничка доказательства (Confirmation Page) имеется возможность указать адресок странички с информацией доказательства ввода (URL of confirmation page (optional)), также адресок странички, отображаемой при нарушении правил ввода (URL of validation failure page (optional)).

На вкладке Сохраняемые поля (Saved Fields) можно выборочно перечислить поля формы, которые требуется сохранить (Form fields to save), найти их порядок, указать формат даты (Date format) и времени (Time format), также включить в итог дополнительные сведения: имя удаленного компьютера (Remote computer name), имя пользователя (Username) и тип обозревателя (Browser type).

Нажмите кнопку Отмена (Cancel), чтобы возвратиться к диалогу Характеристики формы (Form Properties).

Если в диалоге Характеристики формы (Form Properties) установить переключатель В базе данных (Send to database) в группе частей управления Сохранение результатов (Where to store results), то данные будут сохраняться в базе данных. Это может быть база данных Microsoft Access либо другая база данных, поддерживающая работу через стандартный системный интерфейс доступа к базам данных ODBC (Open Database Connectivity - Связь с открытыми базами данных). Для работы с базой данных нужно сделать и настроить соединение (Database connection), избрать таблицу и установить другие характеристики в диалоге Характеристики сохранения результатов базы данных (Options for Saving Results to Database), который вызывается при нажатии на кнопку Характеристики (Options).

Если в диалоге Характеристики формы (Form Properties) установить переключатель В другом месте (Send to other) в группе частей управления Сохранение результатов (Where to store results), то данные будут обрабатываться при помощи скрипта (сценария), другими словами маленький программки, написанной разработчиком web сайта. Такую программку именуют также программой-обработчиком, либо просто обработчиком. В редакторе FrontPage имеются два готовых обработчика: для дискуссионных форм (Discussion Form Handler) и для регистрационных форм (Registration Form Handler). Эти обработчики выбираются в открывающемся перечне рядом с переключателем В другом месте (Send to other), а их характеристики задаются в отдельных диалогах, вызываемых при нажатии на кнопку Характеристики (Options).

Невзирая на обилие способностей по обработке результатов формы, вы, вероятнее всего, не можете проверить их работу на локальном компьютере. Для автоматического сохранения данных в файле, письме либо базе данных нужно, чтобы web cepвep, где расположен web сайт, поддерживал технологии FrontPage и SharePoint. Эти технологии созданы для поддержки web сайтов, разработанных при помощи программки FrontPage. Они, а именно, предоставляют два главных сервиса: прием и передачу данных и файлов от гостей web сайтов к web cepвepy впрямую, без использования дополнительных протоколов, и поддерживают работу специфичных для редактора FrontPage частей пользовательского интерфейса. Таким способом, чтобы проверить работоспособность обрисованных выше средств для работы с формами, нужно расположить web сайт на web cepвepe с поддержкой технологий FrontPage и SharePoint.

Единственным вариантом обработки результатов формы без использования технологий FrontPage и SharePoint является внедрение скрипта, определенного разработчиком web сайта. Скрипт при всем этом представляет собой специальную программку, написанную в согласовании с требованиями одной из технологий пересылки клиентских данных: CGI (Common Gateway Interface - Общий шлюзовой интерфейс), ISAPI, (Internet Server Application Program Interface - Программный интерфейс для приложений интернет сервера), NSAPI (Netscape Server Application Program Interface - Программный интерфейс для приложений web cepвepa Netscape) либо ASP (Active Server Pages - Активные серверные странички). Чтобы установить свой скрипт для обработки результатов формы, нужно сделать последующее.

В диалоге Характеристики формы (Form Properties) установите переключатель В другом месте (Send to other) в группе частей управления Сохранение результатов (Where to store results).

В открывающемся перечне, рядом с переключателем, изберите вариант Настраиваемый сценарий ISAPI, NSAPI, CGI либо ASP (Custom ISAPI, NSAPI, CGI or ASP Script) и нажмите кнопку Характеристики (Options). На дисплее появится диалог Характеристики обработчика форм (Options for Custom Form Handler).

В поле ввода Действие (Action) нужно указать полный адресок программы-обработчика.

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

В согласовании с перечисленными выше технологиями отправки клиентских данных есть два стандартных способа пересылки POST и GET, которые отличаются методом пересылки информации. В обоих случаях информация передается в виде пар имя_поля=значение, разбитых амперсандами &. Программа-обработчик должна разобрать эти данные и выполнить определенные деяния, к примеру произвести поиск в базе данных и вывести итог в виде HTML странички, которая пересылается назад для просмотра в браузере. В нашем примере (заказ авиабилетов) обработчик должен сохранить сведения о клиенте, забронировать за ним билет и сказать об этом, передав в браузер страничку с доказательством. Или передать страничку с отказом в регистрации с указанием обстоятельств.

Нажмите кнопку ОК, чтобы закрыть диалог Характеристики обработчика форм (Options for Custom Form Handler), и потом кнопку OK в диалоге Характеристики формы (Form Properties).

Последним этапом при разработке формы является включение в состав web сайта странички доказательства (confirmation page). Страничка доказательства выводится в ответ на отправку данных при нажатии кнопки Выслать (Submit). Обычно она содержит некий текст, подтверждающий отправку, и информацию, введенную гостем web сайта в поля формы. Гость может проверить корректность обозначенных данных и по мере надобности возвратиться к форме для повторного наполнения. При использовании формы программка FrontPage автоматом делает страничку доказательства и обеспечивает ее работу, но только если для обработки результатов формы не употребляется свой скрипт. По умолчанию на страничку доказательства выводятся наименования полей и их значения. Вы сможете без помощи других сделать страничку доказательства и связать ее с формой. Для этого необходимо сделать новейшую страничку и поместить на нее поля доказательства (confirmation fields), которые будут показывать данные из формы, также другие элементы по вашему усмотрению. Чтобы добавить поле доказательства на страничку, изберите дополнительный отран управления Поле доказательства (Confirmation Field) в диалоге Вставка компонента web узла (Insert Web Component).

Мы сделали форму и расположили на нее нужные элементы. Чтобы сделать форму, можно также пользоваться готовыми шаблонами либо мастером сотворения форм. Для этого необходимо избрать в меню команду Файл - Сделать (File - New), в Области задач (Task Pane) щелкнуть мышью на ссылке Другие шаблоны страничек (More page templates) и в диалоге Шаблоны страничек (Page Templates) избрать один из шаблонов, к примеру: Гостевая книжка (Guest Book), Регистрационная форма (User Registration) либо Форма оборотной связи (Feedback Form). Или избрать Мастер странички формы (Form Page Wizard), который запросит нужную информацию для сотворения странички с формой.

Если вы планируете использовать готовые средства FrontPage для сохранения результатов формы в файл либо базу данных, нужно убедиться в том, что на web cepвере, где будет расположен web сайт, были запущены серверные расширения FrontPage, службы Microsoft SharePoint Team Services либо Microsoft Windows SharePoint Services. Подробнее о разработках FrontPage и SharePoint можно выяснить на web сайте компании Microsoft.

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

Страница: Как создавать формы

Дата публикации: 2010.11.23 12:30.Обновление: 2013.12.24 09:14

Следующая статья:

Полезные темы:

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