Macromedia Dreamweaver MX

Поведения, предназначенные для работы с формами

Dreamweaver предусматривает несколько поведений, предназначенных для работы с формами и элементами управления. (Подробнее о поведениях и работе с ними говорилось в главе 13.) Сейчас мы их рассмотрим.

Создание списка гиперссылок (Jump Menu)

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

Когда вы создаете список гиперссылок, Dreamweaver сам создает поведение Jump Menu. Но если вы хотите преобразовать в список гиперссылок уже су­ществующий список, вам придется создавать его вручную. Для этого выде­лите нужный список в окне документа и выберите в меню поведений пункт Jump Menu. После этого на экране появится уже знакомое вам диалоговое окно Insert Jump Menu, в котором вы сможете задать пункты списка гипер­ссылок.

Создание кнопки перехода для списка гиперссылок (Jump Menu Go)

Это поведение тоже используется для создания списка гиперссылок, но уже с кнопкой Перейти. Как и в предыдущем случае, вам также обычно не нуж­но создавать его самим — это сделает за вас Dreamweaver. Другое дело, если вы хотите "приделать" кнопку Перейти к уже существующему списку гипер­ссылок. В этом случае создайте кнопку, выделите ее и выберите в меню по­ведений пункт Jump Menu Go. (Список гиперссылок уже должен быть соз­дан.) На экране появится диалоговое окно Jump Menu Go, показанное на рис. 16.31. Все, что вам нужно сделать, — это выбрать в раскрывающемся списке Choose Jump Menu нужный список гиперссылок и нажать кноп­ку ОК.

Задание нового значения поля ввода (Set Text of Text Field)

Поведение Set Text Of Text Field позволяет вам поместить новое значение в любое поле ввода или любую область редактирования из имеющихся на странице. Чтобы создать его, выберите пункт Set Text of Text Field в под­меню Set Text меню поведений. На экране появится диалоговое окно Set Text of Text Field, показанное на рис. 16.32.

В раскрывающемся списке Text Field выбирается поле ввода или область редактирования, куда вы хотите поместить новое значение. Само это значе­ние вводится в область редактирования New Text. Задав нужные настройки, нажмите кнопку ОК.

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

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Проверка данных, введенных в форму (Validate Form)

Очень часто нужно проверять данные, введенные посетителем страницы в форму, на правильность. Сами понимаете, компьютеры ненадежны, но люди еще ненадежнее (один из законов Мерфи).

Для этого Dreamweaver предоставляет поведение validate Form. С его по­мощью можно проверять введенные данные на правильность: являются ли они адресом электронной почты, числом и введены ли вообще. Это поведе­ние обычно привязывается к событию onsubmit тега <form> и срабатывает, когда посетитель страницы нажимает кнопку отправки данных. Но оно мо­жет также привязываться и к событиям onBiur или onchange тега <input>, происходящим, когда посетитель переключается на другой элемент управ­ления или изменяет данные в поле ввода, соответственно. В первом случае введенные данные проверяются "скопом", во втором — после ввода каждого значения. На практике применяются оба подхода; сами решайте, какой из них использовать. Если вы хотите привязать поведение к форме, выберите элемент формы, если к полю ввода — нужное поле ввода. Выберите одно­именный пункт меню поведений. И не забудьте выбрать необходимое собы­тие в меню колонки Events списка. После этого можно вводить нужные данные в диалоговое окно Validate Form (рис. 16.33).

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

Группа элементов управления Value позволяет задать, должен ли пользова­тель ввести в выбранное поле ввода значение. В эту группу входит единст­венный элемент управления — флажок Required. Если он включен, будет выполняться проверка, введено ли в поле ввода значение. Если же он от­ключен, такая проверка выполняться не будет.

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

□ Anything (включен по умолчанию) — любое значение;

□ Email Address — адрес электронной почты;

□ Number — любое число;

□ Number from... to... — число в заданном диапазоне. Нижнее значение

Этого диапазона задается в поле ввода from, верхнее — в поле ввода to.

Если вы выберете любой переключатель в этой группе, кроме Anything,

Dreamweaver создаст Web-сценарий, проверяющий введенные в поле ввода данные на правильность. Если данные такую проверку не пройдут, сцена­рий выведет окно-предупреждение, предлагающее посетителю страницы исправить ошибку.

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

Введя нужные данные, не забудьте нажать кнопку ОК.