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

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

Свойства 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». Для получения дополнительных сведений нажмите кнопку «Справка» в этом диалоговом окне.

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

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

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

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

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

При разработке форм не забывайте помечать поля формы описательным текстом, чтобы пользователи знали, на что они отвечают — например, «Введите ваше имя» для запроса информации об имени.

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

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

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

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

Откроется диалоговое окно «Выбор источника изображения».

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

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

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

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

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

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

Выберите «Вставка» > «Форма» > «Группа переключателей».

Заполните поля диалогового окна и нажмите кнопку «ОК».

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

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

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

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

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

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

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

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

Выберите «Вставка» > «Форма» > «Группа флажков».

Заполните поля диалогового окна и нажмите кнопку «ОК».

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

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

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

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

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

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

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

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

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

Вставка HTML-списка или объекта формы меню на странице

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

    б. Выберите «Вставка» > «Форма» > «Список/меню», чтобы вставить объект формы.

Выполните одно из следующих действий.

• Выберите новый или существующий объект формы HTML-списка или меню и нажмите кнопку «Динамический» в окне инспектора свойств.

• Выберите «Вставка» > «Объекты данных» > «Динамические данные» > «Динамический список выбора».

Заполните поля диалогового окна «Динамический список/меню» и нажмите кнопку «OK».

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

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

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

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

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

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

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

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

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

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

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

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

В поле «Значение переключателя» отображаются значения всех переключателей в группе.

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

Заполните поля диалогового окна «Динамические данные» и нажмите кнопку «OK».

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

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

  в. Измените код, вставляемый Dreamweaver на страницу, чтобы отобразить динамический текст (необязательно).

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

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

Например, можно ввести имя функции, которая еще не существует, например processMyForm().

Например, можно определить следующую функцию JavaScript в разделе head документа для отображения сообщения при нажатии пользователем кнопки «Отправить»:

function processMyForm(){

alert('Thanks for your order!');

}

Этот шаг выполняется один раз.

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

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

Заключает элемент формы в тег label следующим образом:

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

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

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

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

Тег label не используется, как в следующем примере:

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

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

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

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

• Отредактируйте соответствующие атрибуты в представлении «Код».

• Щелкните правой кнопкой мыши (Windows) или нажмите CONTROL и щелкните (Macintosh), а затем выберите «Редактировать тег».