Поведения, предназначенные для работы с формами: Jump Menu, Jump Menu Go, Set Text of Text Field, Validate Form
Dreamweaver предусматривает несколько поведений, предназначенных для работы с формами и элементами управления. (Подробнее о поведениях и работе с ними говорилось в главе 13.) Сейчас мы их рассмотрим.
Создание списка гиперссылок (Jump Menu)
Это поведение используется при создании раскрывающегося списка гиперссылок. Именно оно обеспечивает переход на другую Web-страницу, когда посетитель выбирает соответствующий пункт в этом списке.
Когда вы создаете список гиперссылок, Dreamweaver сам создает поведение jump Menu. Но если вы хотите преобразовать в список гиперссылок уже существующий список, вам придется создавать его вручную. Для этого выделите нужный список в окне документа и выберите в меню поведений пункт Jump Menu. После этого на экране появится уже знакомое вам диалоговое окно Insert Jump Menu, в котором вы сможете задать пункты списка гиперссылок.
Создание кнопки перехода для списка гиперссылок (Jump Menu Go)
Это поведение тоже используется для создания списка гиперссылок, но уже с кнопкой Перейти. Как и в предыдущем случае, вам также обычно не нужно создавать его самим – это сделает за вас Dreamweaver. Другое дело, если вы хотите "приделать" кнопку Перейти к уже существующему списку гиперссылок. В этом случае создайте кнопку, выделите ее и выберите в меню поведений пункт Jump Menu Go. (Список гиперссылок уже должен быть создан.) На экране появится диалоговое окно Jump Menu Go. Все, что вам нужно сделать, – это выбрать в раскрывающемся списке 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.
В раскрывающемся списке Text Field выбирается поле ввода или область редактирования, куда вы хотите поместить новое значение. Само это значение вводится в область редактирования New Text. Задав нужные настройки, нажмите кнопку ОК.
Вы можете использовать в тексте нового значения любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы поместить в поле ввода текущую дату, вы можете использовать такой код:
Сегодня {new Date()}Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/(или /}).
Проверка данных, введенных в форму (Validate Form)
Очень часто нужно проверять данные, введенные посетителем страницы в форму, на правильность. Сами понимаете, компьютеры ненадежны, но люди еще ненадежнее (один из законов Мерфи).
Для этого Dreamweaver предоставляет поведение validate Form. С его помощью можно проверять введенные данные на правильность: являются ли они адресом электронной почты, числом и введены ли вообще. Это поведение обычно привязывается к событию onsubmit тега <FORM> и срабатывает, когда посетитель страницы нажимает кнопку отправки данных. Но оно может также привязываться и к событиям onBlur или onchange тега <INPUT>, происходящим, когда посетитель переключается на другой элемент управления или изменяет данные в поле ввода, соответственно. В первом случае введенные данные проверяются "скопом", во втором – после ввода каждого значения. На практике применяются оба подхода; сами решайте, какой из них использовать. Если вы хотите привязать поведение к форме, выберите элемент формы, если к полю ввода – нужное поле ввода. Выберите одноименный пункт меню поведений. И не забудьте выбрать необходимое событие в меню колонки Events списка. После этого можно вводить нужные данные в диалоговое окно Validate Form.
В списке Named Fields этого диалогового окна перечислены все поля ввода, созданные на странице. Вы можете выбрать любое из них и задать для него нужную проверку.
Группа элементов управления Value позволяет задать, должен ли пользователь ввести в выбранное поле ввода значение. В эту группу входит единственный элемент управления – флажок Required. Если он включен, будет выполняться проверка, введено ли в поле ввода значение. Если же он отключен, такая проверка выполняться не будет.
С помощью группы переключателей Accept вы можете задать, какого вида значение должно быть введено в поле ввода. Всего переключателей четыре:
- Anything (включен по умолчанию) – любое значение;
- Email Address – адрес электронной почты;
- Number – любое число;
- Number from… to… – число в заданном диапазоне. Нижнее значение этого диапазона задается в поле ввода from, верхнее – в поле ввода to.
Если вы выберете любой переключатель в этой группе, кроме Anything. Dreamweaver создаст Web-сценарий, проверяющий введенные в поле ввода данные на правильность. Если данные такую проверку не пройдут, сценарий выведет окно-предупреждение, предлагающее посетителю страницы исправить ошибку.
Если вы привязываете это поведение к форме, вы можете в этом же диалоговом окне задать проверку для нескольких полей ввода. Для этого просто выберите другое поле ввода в списке Named Fields и задайте нужные критерии проверки. Если вы привязываете поведение к полю ввода, вы можете задать проверку только для этого поля ввода.
Введя нужные данные, не забудьте нажать кнопку ОК.