Рис. 9.16. Только что созданная форма обратной связи

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

- Переключатель. Кнопки на странице под строкой "What kind of comment would you like to send?" ("Какого рода комментарии вы хотели бы послать?") — это переключатель. Хотя каждая из этих кнопок (radio button) добавляется к форме по отдельности, они работают как единая группа. Рядом с каждой кнопкой располагается текст, кратко описывающий ее значение; этот текст не является атрибутом кнопки и вводится отдельно. Переключатели используются в тех случаях, когда необходимо дать пользователю возможность выбора одной из нескольких опций (для этой цели можно использовать также раскрывающийся список)

- Раскрывающийся список. Поле под строкой "What about us do you want to comment on?" ("Что вы хотели бы сказать о нас?") — это раскрывающийся список (drop-down list). Пункты списка задаются при установке свойств этого поля. В раскрывающемся списке можно выбрать один или более пунктов

- Текстовое поле. Следом за раскрывающим списком располагается поле, предназначенное для ввода одной строки текста (one-line text box). Ширина его задается при установке свойств поля

- Текстовое окно. Большое текстовое поле под строкой "Enter your comments in the space provided below:" (Введите свои комментарии в отведенном для этого месте) называется текстовым окном (scrolling text box). Это поле предназначено для ввода текста большого объема (длинных комментариев и т. п.)

- Флажок. Маленький квадратик вблизи нижней границы страницы, начинающий строку "Please contact me as soon as possible regarding this matter" (Свяжитесь со мной как можно скорее) — это флажок. Когда пользователь щелкает на пустом флажке, на нем появляется галочка; с помощью флажков пользователям предоставляется выбор да/нет

- Кнопка. Две кнопки в самом низу формы обратной связи, помеченные Submit Comments (Отправить комментарии) и Clear Form (Очистить форму), представляют собой обычные кнопки (command buttons или pushbuttons). С их помощью пользователи могут выполнить соответствующие действия

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

Создание переключателя

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

1. Установите курсор под строкой "What kind of comment would you like to send?" непосредственно за кнопкой, помеченной Praise (мигающий курсор должен стоять сразу после буквы <е> в слове Praise), и нажмите комбинацию клавиш <Shift>+<Enter>. Курсор перейдет на новую пустую строку сразу под кнопкой Complaint.

2. Нажмите на панели инструментов форм кнопку Radio Button (если панель инструментов форм в данный момент скрыта, укажите в меню View опцию Forms Toolbar); на экране появится новая кнопка.

3. Щелкните по ней правой кнопкой мыши и выберите в контекстном меню пункт Form Field Properties (Свойства поля формы). Откроется диалоговое окно Radio Button Properties (Свойства переключателя), показанное на рис. 9.17.

Рис. 9.17. Диалоговое окно Radio Button Properties

4. Введите в нем следующую информацию:

• Croup Name (Групповое имя). Введите слово CommentType — так будет называться группа кнопок, образующая новый переключатель. Это имя впоследствии будет использоваться на странице подтверждения. Если вы дадите одно и то же групповое имя нескольким кнопкам, то тем самым вы как раз и создадите из них переключатель: из этих кнопок пользователь сможет выбрать только одну

• Value (Значение). Введите слово Compliment. Это слово появится на странице подтверждения, если пользователь выберет в переключателе именно эту кнопку. Вскоре вы увидите, как это работает

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

5. Нажмите кнопку ОК, чтобы выйти из диалогового окна Radio Button Properties, установите курсор следом за только что вставленной кнопкой и введите слово Compliment. Вы сейчас создали очень ценную кнопку: нажимая на нее, пользователи будут слать вам комплименты.

6. Точно таким же образом создайте еще одну кнопку справа от кнопки Compliment (чтобы немного отодвинуть кнопки друг от друга, нажмите пробел). В диалоговом окне Radio Button Properties дайте новой кнопке то же самое групповое имя CommentType, но присвойте ей значение Criticism. В качестве начального состояния установите Not selected. Закройте диалоговое окно Radio Button Properties, нажав кнопку ОК.

7. В строке следом за новой кнопкой введите слово Criticism. Создание переключателя завершено. На рис. 9.18 вы видите, как будет выглядеть часть вашей страницы, посвященная переключателям.

Не забудьте сохранить изменения.

Итак, вы создали двухпозиционный переключатель под именем CommentType. Если вы полюбопытствуете насчет свойств кнопок переключателя, расположенного над ним (кнопки Complaint, Problem, Suggestion и Praise), вы увидите, что все они имеют групповое имя MessageType. Вы только что создали аналогичную группу; точно таким же способом вы можете создать любой переключатель.

Рис. 9.18. Новый переключатель

Создание раскрывающегося списка

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

1. Установите курсор после текстового поля под предложением "What about us do you want to comment on?" и нажмите комбинацию клавиш <Shift>+<Enter>; курсор переместится на новую строку.

2. Нажмите на панели инструментов кнопку Drop-Down Menu; прямо под существующим списком появится новый раскрывающийся список.

3. Щелкните правой кнопкой мыши на новом списке и выберите в контекстном меню Form Field Properties. Откроется диалоговое окно Drop-Down Menu Properties (Свойства раскрывающегося списка), показанное на рис. 9.19.

Рис. 9.19. Диалоговое окно Drop-Down Menu Properties

4. В поле Name введите имя Topic. Это имя вы будете использовать позднее, при формировании страницы подтверждения.

5. Нажмите кнопку Add, чтобы ввести новый элемент списка, при этом откроется диалоговое окно Add Choice (Добавить пункт) (рис. 9.20).

Рис. 9.20. Диалоговое окно Add Choice

6. В текстовом поле Choice наберите слово Site. По умолчанию этому элементу будет присвоено то же самое значение, что и его имя; если вы хотите дать ему значение, отличное от имени, установите флажок Specify Value и введите нужное значение. В секции Initial State установите флажок Selected, тем самым элемент Site будет установлен как выбранный по умолчанию и именно его пользователь увидит в поле списка, в первый раз открыв форму обратной связи в браузере.
Указав в диалоговом окне Add Choice все необходимые сведения, нажмите кнопку ОК.

7. Тем же путем добавьте еще три элемента — Technical Support, Prices и Other. Для каждого из них установите в секции Initial State диалогового окна Add Choice опцию Not Selected. Ширина раскрывающегося списка будет автоматически подстроена под самый широкий из элементов списка. На рис. 9.21 приведен вид диалогового окна Drop-Down Menu Properties после добавления всех перечисленных элементов.

Рис. 9.21. Диалоговое окно Drop-Down Menu Properties после добавления всех элементов

8. В диалоговом окне Drop-Down Menu Properties присутствуют еще несколько кнопок, выполняющих некоторые дополнительные функции:

• Modify (Изменить). Чтобы отредактировать какой-либо из элементов списка, выделите его и нажмите эту кнопку, при этом появится диалоговое окно Modify Choice (Изменить элемент), соответствующее этому элементу

• Remove (Удалить). Чтобы удалить элемент списка, выделите его и нажмите кнопку Remove

• Move Up (Переместить вверх). Чтобы переместить элемент вверх по списку, выберите этот элемент и нажмите Move Up (в списке элементы располагаются в том же порядке, в котором они перечислены в диалоговом окне Drop-Down Menu Properties)

• Move Down (Переместить вниз). Чтобы переместить элемент вниз по списку, выберите его и нажмите Move Down.

Помимо этого, в поле Height можно задать высоту списка. Для первого раза оставьте предлагаемое значение 7. Этот параметр определяет вид списка в браузере. Если высота равна 1, то в большинстве браузеров в раскрывающемся списке отображается только один элемент, а просмотр остальных элементов осуществляется при помощи стрелки вниз. Если задана высота, большая единицы, то список будет выглядеть как прокручиваемое текстовое окно, число одновременно видимых элементов в котором равно Height.

Наконец, установите переключатель Allow Multiple Selections (Разрешить множественный выбор) в положение No, чтобы запретить выбор нескольких элементов одновременно. Положение Yes этого переключателя дает пользователю возможность выбрать из списка более одного элемента. Это может быть полезным во многих ситуациях, например, когда пользователю предлагается выбрать из списка те продукты, информацию о которых он хотел бы получить.

9. После завершения ввода всех необходимых данных нажмите кнопку ОК. В результате вы увидите картину, приведенную на рис. 9.22.

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

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

Теперь мы приступим к созданию однострочного текстового поля. Мы расположим его справа от раскрывающегося списка; в нем пользователи, выбравшие в списке пункт Other (Другое), смогут ввести свой вариант ответа.

Рис. 9.22. Построен раскрывающийся список

1. Установите курсор справа от раскрывающего списка, который вы только что создали. Нажмите пробел, чтобы между списком и текстовым полем был небольшой интервал. Введите слово Other: и еще раз нажмите пробел.

2. Нажмите на панели инструментов кнопку One-Line Text Box; на месте курсора появится текстовое поле.

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

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

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

5. В поле Initial Value не вводите ничего. В нашем случае пользователь сам будет вводить в текстовом поле дополнительные элементы, так что необходимости в установке начального значения нет. Если вы зададите начальное значение, оно появится в текстовом поле при первом открытии формы в браузере; этот текст пользователь волен изменять как угодно.

6. В поле Width in characters (Ширина в символах) введите число 20, если текущее значение отлично от этого. Этим параметром начальная ширина текстового поля устанавливается равной 20 символам. Если впоследствии вы захотите изменить его размер, просто зацепите в Редакторе маркер изменения размера и потяните его в нужную сторону.

7. В секции Password Field выберите опцию No, тем самым указав, что в данном случае текстовое поле не будет использоваться для ввода пароля.

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

9. Завершив ввод всей необходимой информации в диалоговом окне Text Box Properties, нажмите кнопку ОК. На рис. 9.24 вы видите, как должны выглядеть на вашей странице раскрывающийся список и текстовое поле.

Рис. 9.24. Раскрывающийся список и текстовое поле

Итак, на этом этапе создано текстовое поле для ввода пользователем дополнительных комментариев.