Руководство пользователя Отмена

Создание веб-форм

Поиск

Последнее обновление 21 мая 2021 г.

Примечание.

После обновлений, внесенных в Dreamweaver Creative Cloud, поддержка HTML-элементов формы была расширена. См. сведения в разделе Расширенная поддержка элементов форм в HTML5.

О веб-формах

Когда посетитель вводит данные в форму, отображенную в веб-браузере, и нажимает кнопку «Отправить», эти данные отправляются на сервер, где обрабатываются серверным сценарием или приложением. Сервер отвечает, отправляя обработанные сведения обратно пользователю (или клиенту) или выполняя некоторые действия с содержимым формы.

Имеется возможность создавать формы для передачи данных на большинство серверов приложений, в том числе сервера PHP, ASP и ColdFusion. При использовании ColdFusion в формы можно также добавлять элементы управления, специфические для ColdFusion.

Примечание.

Данные формы также можно отправить непосредственно получателю электронной почты.

Объекты формы

В Dreamweaver элементы ввода данных в форме называются объектами формы. Объекты формы позволяют пользователю вводить данные. В форму можно добавить следующие объекты формы.

Текстовые поля

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

Примечание.

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

Скрытые поля

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

Кнопки

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

Флажки

Позволяют выбрать несколько вариантов в группе. Пользователь может выбрать любое число вариантов. В следующем примере показаны три установленных флажка: «Серфинг», «Катание на горном велосипеде» и «Рафтинг».

Переключатели

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

Меню со списком

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

Примечание.

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

Меню переходов

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

Поля файла

Позволяют находить файл на компьютере и загружать его в виде данных формы.

Поля изображений

Позволяют вставить изображение в форму. Поля изображения можно использовать для создания графических кнопок, таких как «Отправить» или «Сброс». Чтобы использовать изображение для задачи, отличной от передачи данных, нужно добавить к объекту формы поведение сервера.

Создание HTML-формы

(Только для пользователей Creative Cloud): в рамках поддержки HTML5 на панели «Свойства» для элементов формы были добавлены новые атрибуты. Кроме того, четыре новых элемента формы (адрес электронной почты, поиск, телефон, URL-адрес) были добавлены в раздел «Формы» панели «Вставка». См. дополнительные сведения в разделе Расширенная поддержка элементов форм в HTML5.

Откройте страницу и поместите курсор вставки туда, где нужно разместить форму.
Выберите пункт меню «Вставка» > «Форма» или выберите категорию «Формы» на панели «Вставка» и щелкните значок «Форма».

В представлении «Дизайн» формы обозначены красным пунктирным контуром. Если этот контур не отображается, выберите меню «Просмотр» > «Вспомогательные элементы» > «Невидимые элементы».
Свойства HTML-формы отображаются в инспекторе свойств («Окно» > «Свойства»):

а. Чтобы выбрать форму, щелкните контур формы в окне документа.

б. В поле «Имя формы» введите уникальное имя, по которому можно будет идентифицировать форму.

Присвоив форме имя, вы сможете ссылаться на нее или контролировать ее, используя язык сценариев, например JavaScript или VBScript. Если не присвоить форме имя, Dreamweaver автоматически генерирует имя, используя синтаксис formn, увеличивая значение n для каждой добавляемой на страницу формы.

в. В поле «Действие» укажите страницу или сценарий, в котором будут обрабатываться данные формы, указав путь или щелкнув значок папки, чтобы перейти на нужную страницу или в нужный сценарий. Пример: processorder.php.

г. Во всплывающем меню «Метод» укажите метод передачи данных формы на сервер.

Задайте любой из следующих параметров.

По умолчанию — для отправки данных формы на сервер будет использована настройка браузера по умолчанию. Как правило, значение по умолчанию — метод GET.

GET — добавляет значение в URL-адрес, запрашивающий страницу.

POST — вставляет данные формы в HTTP-запрос.

Не используйте метод GET для отправки длинных форм. Длина URL-адреса ограничена 8192 символами. Если объем отправленных данных слишком велик, данные будут обрезаны, что приведет к неожиданным результатам или сбою обработки.

Динамические страницы, созданные параметрами, которые передаются методом GET, можно пометить закладками, потому что все значения, необходимые для повторного создания страницы, содержатся в URL-адресе, отображаемом в поле «Адрес» браузера. А динамические страницы, созданные параметрами, которые передаются методом POST, пометить закладкой невозможно.

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

д. Во всплывающем меню «Тип шифрования» укажите MIME-тип кодировки данных, которые отправляются на сервер для обработки (необязательно).

Параметр по умолчанию application/x-www-form-urlencode обычно используется вместе с методом POST. При создании поля для загрузки файла укажите тип MIME multipart/form-data.

е. Во всплывающем меню «Назначение» укажите окно, в котором нужно отображать данные, которые возвращаются вызываемой программой (необязательно).

Если названное окно не открыто, открывается новое окно с этим именем. Задайте любое из следующих значений целевого объекта.

_blank — открывает целевой документ в новом неименованном окне.

_parent — открывает целевой документ в родительском окне окна, в котором отображается текущий документ.

_self — открывает целевой документ в том же окне, где была отправлена форма.

_top — открывает целевой документ в основной части текущего окна. Это значение можно использовать для того, чтобы целевой документ занимал все окно, даже если оригинал документа отображался во фрейме.
Вставьте объекты формы в страницу:

а. Поместите курсор вставки в то место формы, где должен отображаться объект формы.

b. Выберите объект в меню «Вставка» > «Форма» или выберите категорию «Формы» на панели «Вставка».

в. Заполните поля в диалоговом окне «Атрибуты специальных возможностей тегов Input». Для получения дополнительных сведений нажмите кнопку «Справка» в этом диалоговом окне.

Примечание.

Если диалоговое окно «Атрибуты специальных возможностей тегов Input» не видно, возможно, причина заключается в следующем: при вставке объекта формы курсор вставки был в представлении кода. Убедитесь, что курсор вставки находится в представлении конструктора, и повторите попытку. Дополнительные сведения по этой теме см. в статье Дэвида Пауэрса Создание HTML-форм в Dreamweaver.

г. Задайте свойства объектов.

д. Укажите имя объекта в инспекторе свойств.

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

Примечание.

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

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

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

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

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

Руководство по созданию форм можно найти по адресу www.adobe.com/go/vid0160_ru.

Руководство по форматированию форм с помощью CSS можно найти по адресу: www.adobe.com/go/vid0161_ru.

Свойства объекта текстового поля

Выберите объект текстового поля и задайте следующие параметры в инспекторе свойств:

Ширина символа

Определяет максимальное число знаков, которые могут отображаться в поле. Это значение может быть меньше, чем «Максимальное число знаков», определяющее максимальное число символов, которые можно ввести в поле. Например, если «Ширина знака» равна 20 (значение по умолчанию), а пользователь вводит 100 символов, в текстовом поле будут видны только 20 из этих символов. Хотя не все символы видны в поле, они распознаются объектом поля и отправляются на сервер для обработки.

Макс. число символов

Определяет максимальное число символов, которые можно ввести в поле для однострочных текстовых полей. Используйте параметр «Максимальное число знаков» для ограничения длины почтовых индексов пятью символами, ограничения паролей десятью символами и т. д. Если поле «Максимальное число знаков» не заполнено, пользователь может ввести текст любой длины. Если длина текста превышает ширину символов поля, то текст будет прокручиваться. Если пользователь превышает максимальное количество символов, форма издает предупредительный сигнал.

Число строк

(Доступно, если выбран вариант «Многострочное») Задает высоту поля для многострочных текстовых полей.

Отключено

Отключает текстовую область.

Только для чтения

Делает текстовую область доступной только для чтения.

Тип

Определяет поле как однострочное, многострочное или поле для ввода пароля.

Однострочное

Возвращает тег input с атрибутом type, равным text. Параметр «Ширина знака» соответствует атрибуту size, а параметр «Максимальное число знаков» соответствует атрибуту maxlength.

Многострочное

Возвращает тег textarea. Параметр «Ширина знаков» соответствует атрибуту cols, а параметр «Количество строк» — атрибуту rows.

Пароль

Возвращает тег input с атрибутом type, равным password. Параметры «Ширина знаков» и «Максимальное число знаков» соответствуют тем же атрибутам, что и в однострочных текстовых полях. Когда пользователь набирает текст в поле для ввода пароля, вводимый текст отображается в виде жирных маркеров или звездочек, чтобы скрыть его от посторонних.

Нач. значение

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

Класс

Позволяет применить к объекту правила CSS.

Параметры объекта «Кнопка»

Имя кнопки

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

Значение

Задает текст, который отображается на кнопке.

Действие

Определяет, что происходит при нажатии кнопки.

Отправить форму

При нажатии кнопки данные формы передаются на обработку. Данные передаются на страницу или в сценарий, указанный в параметре формы «Действие».

Сбросить форму

Очищает содержимое формы при нажатии кнопки.

Нет

Задает действие, выполняемое при нажатии кнопки. Например, можно добавить поведение JavaScript, которое при нажатии кнопки открывает другую страницу.

Класс

Применяет к объекту правила CSS.

Параметры объекта «Флажок»

Выбранное значение

Определяет значение, отправляемое на сервер, когда установлен данный флажок. Например, в опросе можно установить значение «4» для «Полностью согласен» и значение «1» для «Категорически не согласен».

Начальное состояние

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

Динамический

Позволяет серверу динамически определять начальное состояние флажка. Например, флажки можно использовать для того, чтобы визуально представить ответ «Да / Нет», хранящийся в записи базы данных. Во время разработки эти сведения неизвестны. Во время выполнения сервер читает запись базы данных и устанавливает флажок, если указано значение «Да».

Класс

Применяет к объекту правила каскадных таблиц стилей (CSS).

Параметры объекта «Переключатель»

Выбранное значение

Определяет значение, отправляемое на сервер, когда переключатель включен. Например, в поле «Выбранное значение» можно ввести skiing, чтобы указать, что пользователь выбрал катание на лыжах.

Начальное состояние

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

Динамический

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

Класс

Применяет к объекту правила CSS.

Параметры меню

Список/Меню

Задает меню имя. Имя должно быть уникальным.

Тип

Указывает, что происходит при щелчке: раскрывается меню (вариант «Меню») или отображается прокручиваемый список элементов (вариант «Список»). Если нужно, чтобы во время отображения формы в браузере был виден лишь один параметр, выберите вариант «Меню». Для просмотра других вариантов нужно нажать стрелку «Вниз».

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

Высота

(Только для типа «Список») Задает число элементов, отображаемых в меню.

Выделения

(Только для типа «Список») Указывает, можно ли выбирать несколько элементов из списка.

Значения списка

Открывает диалоговое окно, которое позволяет добавлять элементы в меню формы:

Для добавления и удаления элементов из списка используйте кнопки со знаками «плюс» (+) и «минус» (–).
Введите текст метки и необязательное значение для каждого элемента меню.
У каждого элемента списка есть метка (текст, который отображается в списке) и значение (значение, которое передается в обрабатывающее приложение при выборе этого элемента). Если значение не указано, вместо него в обрабатывающее приложение отправляется метка.
Для изменения расположения элементов списка используйте кнопки со стрелками «Вверх» и «Вниз».
Элементы отображаются в меню в такой же последовательности, в какой они отображаются в диалоговом окне «Значения списка». При загрузке страницы в браузере первый элемент в списке выбирается.

Динамический

Позволяет серверу динамически выбирать элемент в меню при первом отображении.

Класс

Позволяет применить к объекту правила CSS.

Выбрано вначале

Задает элементы, выбираемые в списке по умолчанию. Щелкните элемент или элементы в списке.

Вставка полей для отправки файлов

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

Чтобы использовать поля загрузки файлов, нужно создать поведение сервера или страницу, способные обрабатывать передачу файла. Сведения по обработке данных формы можно найти в документации по используемой серверной технологии. Например, если используется технология PHP, см. раздел «Обработка отправленных файлов» в онлайн-руководстве по PHP на сайте http://us2.php.net/features.file-upload.php.

Поля файлов требуют использования метода POST для передачи файлов из браузера на сервер. Файл отправляется на адрес, указанный в поле формы «Действие».

Примечание.

Перед использованием полей файлов узнайте у администратора сервера, разрешена ли анонимная загрузка файлов.

Вставьте форму в страницу («Вставка» > «Форма»).
Выберите форму, чтобы отобразить для нее инспектор свойств.
Установите метод формы POST.
Во всплывающем меню «Тип кодировки» выберите multipart/form-data.
В поле «Действие» укажите поведение сервера или страницу, способные обрабатывать загруженный файл.
Поместите курсор вставки внутри контура формы и выберите меню «Вставка» > «Форма» > «Поле файла».
Установите следующие параметры в инспекторе свойств.

Имя поля файла

Задает имя объекта поля файла.

Ширина символа

Определяет максимальное число символов, которые могут отображаться в поле.

Максимальное число символов

Задает максимальное число знаков, которые могут находиться в поле. Если пользователь выбирает файл, длина имени файла и пути к нему может превышать значение, определенное в параметре «Максимальное число знаков». Однако, если в поле файла попытаться ввести имя файла и путь к нему, удастся ввести только число знаков, определенное в параметре «Максимальное число знаков».

Вставка кнопки с изображением

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

В документе поместите курсор вставки внутри контура формы.
Выберите меню «Вставка» > «Форма» > «Поле изображения».

Появится диалоговое окно «Выбрать источник изображения».
Выберите изображение для кнопки в диалоговом окне «Выбрать источник изображения» и нажмите кнопку «ОК».
Установите следующие параметры в инспекторе свойств.

ImageField

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

Src

Задает изображение, которое будет использоваться для кнопки.

Замещ. текст

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

Выравнивание

Задает атрибут выравнивания объекта.

Изменение изображения

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

Класс

Позволяет применить к объекту правила CSS.
Чтобы назначить кнопке поведение JavaScript, выберите изображение и выберите поведение сервера на панели «Поведение» («Окно» > «Поведение»).

Параметры объекта скрытого поля

HiddenField

Задает имя поля.

Значение

Задает значение поля. Это значение передается на сервер при отправке формы.

Вставка группы переключателей

Поместите курсор вставки внутрь контура формы.
Выберите «Вставка» > «Форма» > «Группа переключателей».
Заполните поля диалогового окна и нажмите кнопку «ОК».

а. В поле «Имя» введите название группы переключателей.

При задании переключателей для передачи параметров обратно на сервер эти параметры связываются с именем. Например, если назвать группу myGroup и задать метод формы GET (так, чтобы форма передавала параметры URL-адреса, а не параметры формы, когда пользователь нажимает кнопку «Отправить»), выражение myGroup="CheckedValue" передается на сервер в составе URL-адреса.

б. Нажмите кнопку «плюс» (+), чтобы добавить в группу переключатель. Введите метку и значение выбора для нового переключателя.

в. Воспользуйтесь стрелками «вверх» и «вниз», чтобы изменить порядок кнопок.

г. Чтобы настроить выбор определенного переключателя, когда страница открывается в браузере, введите значение, равное значению переключателя, в поле «Выбрать значение, равное».

Введите статическое значение или укажите динамическое значение, щелкнув значок с молнией, расположенный рядом с ячейкой, и выбрав набор записей с возможными значениями выбора. В любом случае указанное значение должно совпадать со значением выбора одного из переключателей группы. Для просмотра выбранных значений переключателей щелкните каждый из них и откройте соответствующий инспектор свойств («Окно» > «Свойства»).

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

Свойства также можно определить в инспекторе свойств или непосредственно в представлении «Код».

Вставка группы флажков

Поместите курсор вставки внутрь контура формы.
Выберите «Вставка» > «Форма» > «Группа флажков».
Заполните поля диалогового окна и нажмите кнопку «ОК».

а. В поле «Имя» введите название группы флажков.

При задании флажков для передачи параметров обратно на сервер эти параметры связываются с именем. Например, если назвать группу myGroup и задать метод формы GET (так, чтобы форма передавала параметры URL-адреса, а не параметры формы, когда пользователь нажимает кнопку «Отправить»), выражение myGroup="CheckedValue" передается на сервер в составе URL-адреса.

б. Нажмите кнопку «плюс» (+), чтобы добавить в группу флажок. Введите метку и значение выбора для нового флажка.

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

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

Введите статическое значение или укажите динамическое значение, щелкнув значок с молнией, расположенный рядом с ячейкой, и выбрав набор записей с возможными значениями выбора. В любом случае указанное значение должно совпадать со значением выбора одного из флажков группы. Чтобы просмотреть значения выбора флажков, щелкните каждый из них и откройте соответствующий инспектор свойств («Окно» > «Свойства»).

д. Выберите формат, в котором в Dreamweaver должны располагаться флажки.

Расположите флажки с помощью разрывов строк или таблицы. Если выбрать таблицу, Dreamweaver создает таблицу с одним столбцом и размещает флажки слева, а метки — справа.

Свойства также можно определить в инспекторе свойств или непосредственно в представлении «Код».

О динамических объектах форм

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

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

Вставка или изменение динамического меню HTML-формы

Можно динамически заполнять меню HTML-формы или меню со списком записями из базы данных. Для большинства страниц можно использовать объект меню HTML.

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

Вставьте на страницу объект HTML-формы «Список/Меню»:

а. Щелкните внутри HTML-формы на странице («Вставка» > «Форма» > «Форма»).

б. Выберите «Вставка» > «Форма» > «Список/меню», чтобы вставить объект формы.
Выполните одно из следующих действий.
- Выберите новый или существующий объект HTML-формы «Список/Меню», а затем нажмите кнопку «Динамический» в инспекторе свойств.
- Выберите меню «Вставка» > «Объекты данных» > «Динамические данные» > «Динамический список выбора».
Заполните поля диалогового окна «Динамический список/меню» и нажмите кнопку «ОК».

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

б. В области «Статические параметры» введите элемент по умолчанию в списке или меню. Этот параметр также можно использовать для редактирования статических записей в объекте формы «Список/Меню» после добавления динамического содержимого.

в. Воспользуйтесь кнопками «плюс» (+) и «минус» (–), чтобы добавить или удалить элементы из списка (необязательно). Элементы располагаются в таком же порядке, как и в диалоговом окне «Начальные значения списка». При загрузке страницы в браузере выбирается первый элемент в списке. Для изменения расположения элементов списка используйте кнопки со стрелками «Вверх» и «Вниз».

г. Во всплывающем меню «Значения» выберите поле, содержащее значения элементов меню.

д. Во всплывающем меню «Метки» выберите поле, содержащее метки для элементов меню.

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

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

Преобразование меню в HTML-форме в динамические

В представлении «Дизайн» выберите объект формы «Список/Меню».
В инспекторе свойств нажмите кнопку «Динамический».
Заполните поля диалогового окна и нажмите кнопку «ОК».

Отображение динамического содержимого в текстовых полях HTML-формы

При просмотре формы в браузере можно отобразить динамическое содержимое в текстовых полях HTML.

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

Выберите текстовое поле в HTML-форме на странице.
Для отображения диалогового окна «Динамические данные» щелкните в инспекторе свойств значок с молнией рядом с полем «Исходное значение».
Выберите столбец набора записей, из которого будут браться значения для текстового поля, а затем нажмите кнопку «ОК».

Установка параметров диалогового окна «Динамическое текстовое поле»

Выберите во всплывающем меню «Текстовое поле» поле, которое нужно сделать динамическим.
Щелкните значок с молнией рядом с полем «Задать значение», выберите источник данных из списка источников данных и нажмите кнопку «ОК».

Источник данных должен содержать текстовые данные. Если в списке нет источников данных или если доступные источники данных не удовлетворяют требованиям, нажмите кнопку со знаком «плюс» (+) и определите новый источник данных.

Динамическая предварительная установка флажка в HTML-форме

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

Сначала следует создать форму на странице ColdFusion, PHP или ASP, а также нужно определить набор записей или иной источник динамического содержимого для флажков. В идеале источник содержимого должен содержать логические данные, такие как «Да»/«Нет» либо true/false.

Выберите объект флажка на странице.
В инспекторе свойств нажмите кнопку «Динамический».
Заполните поля диалогового окна «Динамический флажок» и нажмите кнопку «ОК».
- Щелкните значок с молнией рядом с ячейкой «Проверять, если» и выберите поле из списка источников данных.
  
  Источник данных должен содержать логические данные, такие как Yes и No или true и false. Если в списке нет источников данных или если доступные источники данных не удовлетворяют требованиям, нажмите кнопку со знаком «плюс» (+) и определите новый источник данных.
- В поле «Равно» введите значение, которое должно иметь поле, чтобы флажок устанавливался.
  
  Например, чтобы флажок отображался выбранным, когда определенное поле в записи имеет значение Да, в ячейке «Равно» введите Да.
Примечание.

Данное значение также передается на сервер при нажатии кнопки формы «Отправить».

Динамическая предварительная установка переключателя в HTML-форме

Можно задать динамический выбор HTML-переключателя при отображении записи в HTML-форме в браузере.

Сначала на странице ColdFusion, PHP или ASP необходимо создать форму, а затем вставить как минимум одну группу HTML-переключателей («Вставка» > «Форма» > «Группа переключателей»). Также необходимо определить набор записей или другой источник динамического содержимого для переключателей. В идеале источник содержимого должен содержать логические данные, такие как «Да»/«Нет» либо true/false.

В представлении «Дизайн» выберите переключатель в группе переключателей.
В инспекторе свойств нажмите кнопку «Динамический».
Заполните поля диалогового окна «Динамические группы переключателей» и нажмите кнопку «ОК».

Установка параметров диалогового окна «Динамические группы переключателей»

Во всплывающем меню «Группа переключателей» выберите форму и группу переключателей на странице.

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

Выбранный набор записей содержит значения, совпадающие со значениями выбора для переключателей. Чтобы просмотреть значения выбора для переключателей, выберите каждый переключатель и откройте для него инспектор свойств («Окно» > «Свойства»).
Нажмите кнопку «ОК».

Установка параметров диалогового окна «Динамические группы кнопок-переключателей» (ColdFusion)

Выберите группу переключателей и форму во всплывающем меню «Группа переключателей».
Щелкните значок с молнией рядом с полем «Выбрать значение равное».
Заполните поля диалогового окна «Динамические данные» и нажмите кнопку «ОК».

а. Выберите источник данных из списка источников данных.

б. Выберите формат данных для текста (необязательно).

в. Измените код, вставляемый Dreamweaver на страницу, чтобы отобразить динамический текст (необязательно).
Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Динамическая группа переключателей», и вставьте местозаполнитель динамического содержимого в «Группа переключателей».

Проверка данных HTML-форм

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

Можно использовать мини-приложения формы Spry для построения форм и проверки содержимого определенных элементов формы. Дополнительные сведения см. в приведенных ниже разделах по Spry.

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

Создайте HTML-форму, которая содержит как минимум одно текстовое поле и одну кнопку «Отправить».

Убедитесь, что каждое текстовое поле, которое нужно проверить, имеет уникальное имя.
Нажмите кнопку «Отправить».
На панели «Поведение» («Окно» > «Поведение») нажмите кнопку со знаком «плюс» (+) и выберите из списка поведение сервера «Проверить форму».
Установите правила проверки для каждого текстового поля и нажмите кнопку «ОК».

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

Примечание.

Поведение сервера «Проверить форму» доступно, только если текстовое поле было добавлено в документ.

Добавление вариантов поведения сервера JavaScript к объектам HTML-форм

Можно прикрепить поведения JavaScript, хранимые в Dreamweaver, к объектам HTML-формы, например кнопкам.

Выберите объект HTML-формы.
На панели «Поведение» («Окно» > «Поведение») нажмите кнопку со знаком «плюс» (+) и выберите из списка поведение сервера.

Добавление заказных сценариев к кнопкам HTML-форм

В некоторых формах код JavaScript или VBScript используется для обработки формы или других действий на стороне клиента вместо отправки данных формы для обработки на сервер. Dreamweaver можно использовать для настройки кнопки формы для выполнения определенного скрипта на стороне клиента при нажатии кнопки пользователем.

Выберите в форме кнопку «Отправить».
На панели «Поведение» («Окно» > «Поведение») нажмите кнопку со знаком «плюс» (+) и выберите из списка «Вызов JavaScript».
В поле «Вызов JavaScript» введите имя функции JavaScript, которая будет запускаться при нажатии кнопки, и нажмите кнопку «ОК».

Например, можно ввести имя функции, которая еще не существует, такой как processMyForm().
Если функция JavaScript отсутствует в разделе head документа, добавьте ее сейчас.

Например, в разделе head документа можно определить следующую функцию JavaScript для отображения сообщения при нажатии кнопки «Отправить»:
```
function processMyForm(){ 
    alert('Thanks for your order!'); 
}
```

Создание HTML-форм со специальными возможностями

При вставке объекта HTML-формы можно добавить к объекту формы специальные возможности, а также изменить параметры специальных возможностей позже.

Добавление объекта формы со специальными возможностями

При первом добавлении объекты формы со специальными возможностями активируйте диалоговое окно «Специальные возможности» для объектов формы. См. раздел Оптимизация рабочего пространства для визуальной разработки.

Этот шаг выполняется только один раз.
Поместите в документе курсор вставки туда, где нужно разместить объект формы.
Выберите меню «Вставка» > «Форма», а затем выберите объект формы для вставки.

Появляется диалоговое окно «Атрибуты специальных возможностей тегов Input».
Заполните поля диалогового окна и нажмите кнопку «ОК». Ниже приводится частичный список параметров:

Примечание.

Средство чтения с экрана считывает вводимое имя в качестве атрибута «Метка» для объекта.

ИД

Присваивает идентификатор для поля формы. Данное значение можно использовать для обращения к полю из кода JavaScript. Оно также используется в качестве значения атрибута for, если в параметрах «Стиль» выбран параметр «Присоединить тег label с помощью атрибута for».

Заключение в тег label

Заключает элемент формы в тег label следующим образом:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Присоединение тега label с помощью атрибута for

Использует атрибут for, чтобы заключить элемент формы в тег label следующим образом.

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

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

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

Отсутствие тега label

Тег label не используется, как в следующем примере:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Ключ доступа

Для выбора объекта формы в браузере используется клавиатурный эквивалент (одна буква) и клавиша Alt (Windows) или клавиша Control (Macintosh). Например, если указать B в качестве ключа доступа, пользователи браузера в системе Macintosh для выбора объекта формы могут использовать сочетание клавиш Control+B.

Индекс вкладки

Определяет порядок табуляции для объектов формы. Если установить порядок табуляции для одного объекта, его необходимо установить и для всех объектов.

Установка порядка табуляции полезна тогда, когда на странице есть другие ссылки и объекты форм и необходимо, чтобы пользователь мог переходить между ними в определенном порядке.
Нажмите кнопку «Да», чтобы вставить тег form.

Объект формы появляется в документе.

Примечание.

Если нажать кнопку «Отмена», объект формы появится в документе, но Dreamweaver не свяжет с ним каких-либо специальных тегов или атрибутов.

Изменение значений специальных возможностей для объекта формы

Выберите объект в окне документа.
Выполните одно из следующих действий.
- Отредактируйте соответствующие атрибуты в представлении «Код».
- Щелкните правой кнопкой мыши (Windows) или щелкните с нажатой клавишей Control (Macintosh) и затем выберите «Изменить тег».

Справки по другим продуктам

Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Создание веб-форм

О веб-формах

Объекты формы

Создание HTML-формы

Свойства объекта текстового поля

Параметры объекта «Кнопка»

Параметры объекта «Флажок»

Параметры объекта «Переключатель»

Параметры меню

Вставка полей для отправки файлов

Вставка кнопки с изображением

Параметры объекта скрытого поля

Вставка группы переключателей

Вставка группы флажков

О динамических объектах форм

Вставка или изменение динамического меню HTML-формы

Преобразование меню в HTML-форме в динамические

Отображение динамического содержимого в текстовых полях HTML-формы

Установка параметров диалогового окна «Динамическое текстовое поле»

Динамическая предварительная установка флажка в HTML-форме

Динамическая предварительная установка переключателя в HTML-форме

Установка параметров диалогового окна «Динамические группы переключателей»

Установка параметров диалогового окна «Динамические группы кнопок-переключателей» (ColdFusion)

Проверка данных HTML-форм

Добавление вариантов поведения сервера JavaScript к объектам HTML-форм

Добавление заказных сценариев к кнопкам HTML-форм

Создание HTML-форм со специальными возможностями

Добавление объекта формы со специальными возможностями

Изменение значений специальных возможностей для объекта формы

Справки по другим продуктам

Получайте помощь быстрее и проще

Вопросы сообществу

Свяжитесь с нами