Занятие "Работа с формами"

Урок 7. Работа с формами

Цель: ознакомиться cо способом создания форм для веб-страницы.

Задачи:

• Научиться вставлять форму.

• Научиться включать текстовые поля.

• Научиться работать с виджетами Spry.

• Научиться вставлять кнопки-переключатели.

• Научиться вставлять флажки.

• Научиться вставлять списки.

• Научиться добавлять кнопки формы.

• Научиться внедрять наборы полей и легенды.

• Научиться придавать стиль форме средствами CSS.

В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 7.1):

Рисунок 7.1 - Предварительный просмотр веб-страницы

Добавление формы на страницу

1. На панели Files откройте папку Lab7 и двойным щелчком загру­зите файл contact-start.html

2. Выберите команду File = Save As. В поле имени файла введите contact.html и щелкните по кнопке Save.

Тег должен окружать все элементы формы, поэтому лучше доба­вить его на страницу первым. Если вы попытаетесь вставить элемент фор­мы без тега , Dreamweaver предложит вам вставить тег .

3. В теге mainContent div щелкните после знака вопроса в заголовке, чтобы идентифицировать место, куда планируете вставить свой тег .

4. На панели Insert выберите Forms (Формы) из списка Category. В ка­тегории Forms щелкните по кнопке Form.

Dreamweaver вставит тег в точку вставки, обозначенную красным пунктирным контуром (рисунок 7.2):

Рисунок 7.2 - Пример вставки тега

Теперь зададим атрибут действия тега .

5. При необходимости выберите команду Window = Properties для от­крытия панели Properties. Щелкните по значку папки рядом с полем Action (Действие). В диалоговом окне Select File (Выбрать файл) найдите папку Lab7 и файл form_processing.html. Щелкните по кнопке ОК (рисунок 7.3).

Рисунок 7.3 - Панель Properties

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

6. Выполните команду File = Save.

Вставка текстовых элементов

Текстовые поля — это «рабочие лошадки» всех элементов форм. Они ис­пользуют тег и выступают в селекторе тегов как . Это базовый инструмент для сбора неструктурированных данных в виде ко­ротких строк, и без них представить себе форму трудно. Действительно, многие формы состоят исключительно из текстовых полей.

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

Редактирование настроек для доступных форм

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

1. Выполните команду Edit = Preferences (Правка = Настройки).

2. В диалоговом окне настроек в списке категорий выберите Accessibility (Специальные возможности).

3. В категории Accessibility убедитесь, что установлен флажок для объектов Form (Объекты формы). Щелкните по кнопке ОК (рисунок 7.4).

Рисунок 7.4 - Окно Preferences (Настройки)

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

Использование текстовых полей

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

1. Щелкните внутри красной границы формы.

2. В категории Forms панели Insert выберите Textfield (Текстовое поле).

3. В диалоговом окне Input Tag Accessibility Attributes (Атрибуты специ­альных возможностей тегов Input) в поле ID (Идентификатор) введите «пате» и нажмите Tab. В поле Label введите «Имя» и нажмите Tab. В поле IDслово вводится в нижнем регистре, так как является частью кода. Название поля начинается с прописной буквы, поскольку лицо, за­полняющее форму, прочтет это название рядом с полем ввода данных.

4. В опциях Style выберите Attach label tag using 'for' attribute (При­соединить тег label с помощью атрибута «for»). Убедитесь, что в кате­гории Position (Положение) выбрана опция Before form item (Перед элементом формы). Щелкните по ОК.

Если выбрана опция Attach label tag using 'for' attribute, Dreamweaver вставляет код:

Имя

Этот код позволяет тегу присоединиться к тегу элемен­та формы (рисунок 7.5).

Рисунок 7.5 - Пример вставки объекта формы

5. Выполните команду File = Save.

Первый из объектов формы уже на месте. Вставка других стандартных текстовых полей осуществляется по сходной схеме. В следующем упраж­нении мы добавим специализированную версию текстового поля — поля Spry Text.

Включение полей Spry Text

В уроке 6 вы познакомились со структурой Spry для Ajax и поработа­ли с такими инструментами Spry, как SpryData и Spry Accordion. Dreamweaver также включает ряд объектов Spry для форм. Каждый вид-жет Spry Form комбинирует элементы формы с JavaScript для создания легких в использовании объектов форм со встроенной верификацией.
Верификация — это процесс проверки ввода данных в элемент формы. Он поддерживает целостность и качество введенных данных. Если по­сетитель ввел некорректные или неполные данные, такая форма может оказаться бесполезной. Верификация также гарантирует заполнение всех обязательных полей перед отправкой формы.
Виджеты Spry Form доступны для нескольких типов элементов форм: текстовых полей, текстовых областей, флажков, паролей, подтвержде­ний паролей, групп переключателей и списков выбора. Каждый виджет работает одинаково: вы вставляете его, а затем его свойства в панель Properties.

Мы вставим объект верификации текстового поля Spry Validation Text Field (Текстовое поле проверки Spry) для проверки правильности ввода электронных адресов.

1. Щелкните после ранее введенного поля Name и нажмите Shift+Enter для создания конца строки.

2. В категории Forms панели Insert выберите инструмент Spry Validation Text Field.

3. В диалоговом окне Input Tag Accessibility Attributes в поле ID вве­дите «email» и нажмите Tab. В поле Labelвведите «Email:» и также нажмите Tab. В опциях Style (Стиль) убедитесь, что выбран вариант Attach label tagusing 'for' attribute. В опциях Position выбе­рите Before form item (Перед элементом формы). Щелкните по кноп­ке ОК (рисунок 7.6).

Рисунок 7.6 - Диалоговое окно Input Tag Accessibility Attributes

4. Выполните команду File = Save. Если Dreamweaver предупредит вас об использовании внешних файлов JavaScript, щелкните по кноп­ке ОК.

5. Теперь, когда элемент формы помещен на страницу и дополнен возмож­ностями Spry, вы можете настроить его.

6. Если вкладка текстового поля Spry Text Field не видна, зафиксируйте курсор над полем ввода электронного адреса и дождитесь открытия данной вкладки. Щелкните по вкладке, чтобы выбрать объект.

7. Выполните команду Window = Properties для отображения панели Properties. Во всплывающем меню Туре выберите EmailAddress

8. Теперь настроим запуск верификации.

9. На панели Properties выберите ValidateonBlur (Момент проверки on Blur). Убедитесь, что помечена опция Required (Требуется). Ког­да требуется обязательное заполнение поля, пользователь должен выполнить его, прежде чем отправлять форму (рисунок 7.7).

Рисунок 7.7 - Панель Properties

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

В этом упражнении вы будете принимать сообщения об ошибках в их стандартном формате. Однако их легко настроить на свой лад с помощью меню Preview states (Просмотр состояний) на панели Properties. Вы­берите любое сообщение и введите свой текст в окно Document. Для пре­дотвращения показа сообщений об ошибках, когда вы работаете над ди­зайном страницы, в меню Preview states выберите Initial (Исходный).

Создание набора полей

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

1. Щелкните справа от поля Email и нажмите Enter для создания новой строки.

2. Выделите текстовые поля и их ярлыки Name и Email. Это может оказаться не так просто в окне документа. Чтобы убедиться, что вы выбрали все необходимое, щелкните по кнопке Split для просмотра в режиме отображения CodeandDesign.

Убедитесь, что выбрали весь этот блок:

Имя




Email:

A value is required.Invalid format.

3. В категории Forms панели Insert выберите инструмент Fieldset (На­бор полей).

4. В поле Legend (Условные обозначения) введите свою контактную информацию. Щелкните по кнопке ОК(рисунок 7.8).

Рисунок 7.8 - Окно Fieldset

5. Выполните команду File = Save All.

Набор полей нелегко вывести в режиме отображения Design; однако вы ясно видите условные обозначения. С помощью режима Live View или браузера можно просмотреть текущий рендеринг набора полей. Набор полей как раз включает два поля в окне с названием (рисунок 7.9).

Рисунок 7.9 - Режим Live View

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

Создание полей имени пользователя и пароля

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

1. Щелкните по области вне набора полей, но в пределах красной грани­цы, чтобы задать точку вставки. При необходимости выделите набор полей и нажмите на клавиатуре стрелку вправо, чтобы миновать его. Нажмите Enter для создания пустого абзаца.

2. В категории Forms панели Insert выберите инструмент Spry Valida­tion Text Field (Текстовая область проверки Spry).

3. В диалоговом окне Input Tag Accessibility Attributes в поле ID введи­те «Username» и нажмите Tab. В поле Label введите «Имя пользователя» и также нажмите Tab. Убедитесь, что в разделе Style выбрана опция Attachlabeltagusing'for'attribute, а в разделе Position — опция Be­fore form item. Щелкните по кнопке OK(рисунок 7.10).

Рисунок 7.10 - Диалоговое окно Input Tag Accessibility

4. При необходимости зафиксируйте курсор над полем имени пользо­вателя и подождите, пока появится вкладка Spry TextField. Щелкни­те по ней для выделения объекта.

5. На панели Properties выберите опцию ValidateonBlur, а в поле Min chars (Минимальное число символов) введите 6. Убедитесь, что оп­ция Required помечена флажком.

6. Если режим отображения Design показывает сообщение об ошибке на красном фоне, вы должны вернуться к панели Properties и выбрать оп­цию Initial для PreviewStates (Просмотр состояний), чтобы удалить со­общения из режима отображения Design.

7. Выполните команду File = Save.

Ввод в поле пароля

Поле для ввода пароля — обычное дело в Сети. Как правило, текстовое поле показывает вводимые в него символы. Однако в поле пароля вводи­мые знаки маскируются и показываются как серия звездочек или точек. Это сделано по соображениям безопасности.

1. Нажмите Shift+Enter для созда­ния разрыва строки после поля имени пользователя.

2. В категории Forms панели Insert выберите инструмент верификации пароля SpryValidationPassword (Пароль проверки Spry).

3. В диалоговом окне Input Tag Accessibility Attributes в поле ID вве­дите «Password» и нажмите Tab. В поле Label введите «Пароль» и также нажмите Tab. Убедитесь, что в разделе Style выбрана опция Attach label tagusing 'for' attribute, а в разделе Position — опция Be­fore form item. Щелкните по кнопке OK (рисунок 7.11).

Рисунок 7.11 - Диалоговое окно Input Tag Accessibility

4. Щелкните по вкладке SpryPassword. На панели Properties выберите опции Required и Validate on Blur. В поле Min chars введите 8 (рисунок 7.12).

Рисунк 7.12 - Панель Properties

Если вы не хотите показывать сообщения об ошибках в окне Design, не­обходимо на панели Properties выбрать опцию Initial для Preview States (Просмотр сообщений).

5. Нажмите Shift+Enter для созда­ния разрыва строки после поля пароля.

6. В категории Forms панели Insert щелкните по кнопке верификации пароля SpryValidationConfirm для создания текстового поля подтверждения пароля.

7. В диалоговом окне Input Tag Accessibility Attributes в поле ID вве­дите «confirmpw», а в поле Label введите «Повторите пароль». В раз­деле Style проверьте, что выбрана опция Attachlabel tag using 'for' attribute. Щелкните по кнопке OK (рисунок 7.13).

Рисунок 7.13 - Диалоговое окно Input Tag Accessibility

8. На панели Properties активируйте опцию Required и Validate on Blur. Во всплывающем меню Validate against(Верифицировать) вы­берите password в форме form1 (рисунок 7.14).

Рисунок 7.14 - Панель Properties

9. Поместите курсор сразу после поля подтверждения пароля и нажми­те Enter.

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

Вернемся к пустому параграфу над полем ввода имени пользователя и введем туда инструкции. Если параграфа там нет, выделите поле вво­да имени пользователя и нажмите стрелку влево на клавиатуре, чтобы перейти в область слева от поля. Нажмите Enter (Windows) или Return (Mac), чтобы создать параграф.

10. Щелкните по параграфу и введите следующий текст:

Для доступа к вашему расписанию и планам поездок создайте себе имя пользователя и пароль. Имя пользователя должно содержать не менее 6 знаков. Пароль должен содержать не менее 8 знаков, два из которых должны быть числами.

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

11. Выделите параграф и три поля.

12. В категории Forms панели Insert щелкните по кнопке Fieldset. Введите Онлайн инструменты в поле Legend. Щелк­ните по кнопке ОК (рисунок 7.15).

Рисунок 7.15 - Окно Fieldset

13. Выполните команду File = Save.

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

Внедрение текстовых областей

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

Альтернативный способ создания набора полей состоит в формировании пустого набора с последующим добавлением элементов формы. Мы при­меним этот подход для ряда следующих элементов.

14. Поместите курсор под последним набором полей, но внутри красной границы. При необходимости щелкните внутри него, затем щелкни­те по тегу в селекторе тегов и нажмите стрелку вправо на клавиатуре, чтобы перейти через него. В категории Forms панели Insert выберите Fieldset. В поле Legend введите «Ваша поездка» и щелкните по кнопке ОК (рисунок 7.16).

Рисунок 7.16 - Окно Fieldset

Сейчас можно ввести новый элемент формы внутрь существующего на­бора.

15. В категории Forms панели Insert щелкните по значку Text Area (Об­ласть текста).

16. В диалоговом окне Input Tag Accessibility Attributes в поле ID вве­дите «plans» («Планы»). В поле Labelвведите «Пла­ны поездок». Убедитесь, что в разделе Style выбрана опция Attach label tag using 'for' attribute, а в разделе Position — опция Before form item. Щелкните по кнопке OK (рисунок 7.17).

Рисунок 7.17 - Диалоговое окно Input Tag Accessibility

17. Текстовая область появится стразу после названия. Щелкните после названия и нажмите Shift+Enter для создания разрыва строки (рисунок 7.18).

Рисунок 7.18 - Текстовая область

18. Щелкните внутри пустой текстовой области.

Иногда полезно использовать поле Init val (Initial Value — исходное зна­чение) для показа полезного сообщения с описанием того, что ожидается в определенном элементе формы. Оно не всегда необходимо, и его исполь­зование зависит от названия и четкости пояснения в ваших инструкциях.

19. В поле Init val введите следующий текст: «Кратко опишите, куда вы хотите ехать и надолго ли». Когда посетитель начнет писать в этом поле, этот текст исчезнет (рисунок 7.19).

Рисунок 7.19 - Поле Init val на панели Properties

20. Выполните команду File = Save.

Текстовая область, которую вы добавили, позволяет посетителю сайта вводить подробное описание (вы просите о краткости, но текстовая об­ласть легко вместит несколько абзацев).

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

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

Dreamweaver предоставляет два метода добавления кнопок-пере­ключателей на страницу. Вы можете либо вставить каждую кнопку-переключатель индивидуально, либо всю группу сразу с помощью виджета Spry Validation Radio Group. В первом случае придется пере­именовывать каждую кнопку-переключатель, чтобы все они имели оди­наковое имя. Во втором варианте все кнопки уже имеют одно имя, и связанные файлы JavaScript и CSS позволяют настраивать сообщения об ошибках и придавать стиль. В этом упражнении мы воспользуемся виджетом.

1. Щелкните после поля текстовой области, но в пределах набора полей с названием Ваша поездка. Нажмите Enter для перехода на новую строку. Введите текст: «Насколько велика ваша группа?». Нажмите Enter.

2. В категории Forms панели Insert щелкните по значку Spry Validation Radio Group (Группа переключателей проверки Spry).

3. Трижды щелкните по кнопке (+) рядом с кнопками-переключателями, чтобы создать пять кнопок-переключателей.

Сейчас мы добавим к ним названия и значения.

4. Щелкните в верхней части списка и введите «Один» в поле Label. Нажмите Tab и введите единицу в поле Value. Нажмите Tab и введите «Два» во второе поле Label и введите двойку в поле Value. В том же духе продолжите с остальными названиями «Три», «Четыре», «Больше» и их значениями. В опциях Layout using(Создать макет с помощью) выберите Line breaks (
tags) (Перевод строки (теги
)) — разбиение строк. Щелкните по кнопке ОК (рисунок 7.20).

Рисунок 7.20 - Окно Spry Validation Radio Group

5. В окне документа, если группа кнопок-переключателей еще не вы­брана, щелкните по голубой вкладке, чтобы выбрать виджет Spry для группы кнопок-переключателей. На панели Properties выберите Re­quired(Обязательно). Остальные опции настройте, как показано на рисунке (рисунок 7.21).

Рисунок 7.21 - панели Properties

6. Выполните команду File = Save.

Созданный таким образом набор кнопок-переключателей позволяет сде­лать только один выбор. С помощью виджета Spry Validation Radio Group вы сделали его обязательным элементом формы. Если посетитель сайта не сделает свой выбор, при попытке отправить форму он увидит сообще­ние об ошибке.

Вставка флажков

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

1. Щелкните за группой кнопок-переключателей и нажмите Enter. В режиме отображения Code and Design вы можете проверить код, чтобы убедиться, что перемести­лись за пределы закрывающего тега и , который содер­жит сообщение об ошибке на тот случай, если обязательные кнопки-переключатели пропущены. В режиме отображения Design введите текст: «Какие услуги следует вам предоставить?». Нажмите Enter.

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

2.В категории Forms панели Insert щелкните по значку группы флаж­ков Checkbox Group (Группа флажков).

3. В открывшемся диалоговом окне щелкните по кнопке (+) рядом со словом Checkboxes (Флажки) для создания третьего флажка. Изме­ните первое название на Tours (Туры) и нажмите Tab; затем в поле Value введите «tours». Продолжите, вводя соответствующие значе­ния для названий Transportation (Доставка) и Hotels (Отели). В оп­циях Layoutusing выберите Linebreaks (
tags). Щелкните по кнопке ОК (рисунок 7.22).

Рисунок 7.22 - Окно Checkbox Group

Используя Checkbox Group, не нужно задавать какие-либо свойства на панели Properties. Быстрый взгляд на код выясняет значение групп флажков

4. Щелкните по кнопке Split, чтобы открыть режим отображе­ния Code and Design. Каждый флажок имеет в качестве имени name=«CheckboxGroup1».

При вводе флажков по одному вы должны вручную добавлять им имя. Группа флажков Spry Checkbox Groupэкономит время, автоматизируя процесс.

5. Выполните команду File = Save.

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

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

Работа со списками

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

1. Щелкните за названием последнего флажка и нажмите Enter.

2. Введите текст «Когда вы планируете поездку?» и нажмите Enter.

3. В категории Forms панели Insert выберите опцию List/Menu (Спи­сок/меню).

4. В диалоговом окне Input Tag Accessibility Attributes (Атрибуты спе­циальных возможностей тега) в поле ID(Идентификатор) введите «timeline» и нажмите Tab. Поле Label (Надпись) оставьте пустым, а в опциях Style(Стиль) выберите Nolabeltag (Отсутствует тег для надписи). Щелкните по кнопке ОК (рисунок 7.23).

Рисунок 7.23 - Диалоговое окно Input Tag Accessibility

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

6. Теперь вы готовы добавить элементы списка. Dreamweaver предлагает отдельное диалоговое окно для выполнения этой задачи, открываемое на панели Properties.

7. Выберите элемент формы списка, который только что вставили. При необходимости выполните команду Window = Properties. На пане­ли Properties щелкните по опции ListValues (Значения списка).

8. В открывшемся диалоговом окне в колонке ItemLabel (Надпись элемента) введите «Немедленно» и нажмите Tab. Теперь напишите «immediately» в колонке Value (Значение) и снова нажмите Tab (рисунок 7.24).

Рисунок 7.24 - Окно List Values

Завершите список так:

• Item Label: В течение следующих двух месяцев;Value: втечениедвухмесяцев

• Item Label: В этом году; Value: вэтомгоду

9. Щелкните по кнопке ОК.

Теперь настроим элемент списка, который будет показан при загрузке страницы. Обычно это первый элемент списка.

10. На панели Properties в меню Initially selected (Выбрано вначале) вы­берите Immediately. В категории Туревыберите Menu (Меню) (рисунок 7.25).

Рисунок 7.25 - Панель Properties

В этом случае список не допускает нескольких выборов. Чтобы пользо­ватель имел такую возможность, для опции Туре (Тип) следует задать вариант List (Список), а затем установить флажок Allow multiple (Раз­решить несколько). В этом случае посетители могут, например, выбрать три предпочтительных варианта путешествия. Теперь вернемся к типу Menu для завершения упражнения.

11. Выполните команду File = Save.

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

Ваша форма почти завершена. Осталось лишь добавить кнопку отправки введенной информации.

Добавление кнопки отправки данных.

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

1. Щелкните по любому элементу формы в последнем наборе полей. На панели Properties выберите тег (рисунок 7.26).

Рисунок 7.26 - Элементы формы

2. Теперь поместим кнопку Submit (кнопка отправки данных) вне набора полей.

3. Нажмите стрелку вправо на клавиатуре для перемещения за преде­лы выбранного набора полей. Затем нажмите Enter для создания пространства для кнопки.

4. В категории Forms панели Insert выберите Button (Кнопка).

5. В диалоговом окне Input Tag Accessibility Attributes в поле ID вве­дите «submit». В опциях Style выберите Nolabeltag. Щелкните по кнопке ОК (рисунок 7.27).

Рисунок 7.27 - Диалоговое окно Input Tag Accessibility

6. На панели Properties примите значения по умолчанию для Action и Value. Текст для кнопки можно изменить, например Отпра­вить вместо Submit, введя его в поле Value.

7. Выполните команду File = Save.

Вы завершили создание формы, которая может собирать данные от поль­зователя, включающие информацию об имени, адресе, авторизации и другие сведения, необходимые для оформления путешествия. У нас есть сценарии верификации Spry для обязательных полей и других требо­ваний, например корректного формата ввода электронного адреса или минимального числа знаков в имени пользователя. В рамках формы вы организовали наборы полей и добавили кнопку отправки Submit. Со сце­нарием обработки формы, связанным со строкой Action, эта форма будет работать «как есть». Но прежде давайте добавим немного стилистиче­ской «изюминки».

Стилизованное оформление форм

Хотя созданная нами форма функциональна, она совершенно лишена какого-либо стиля. Хорошо стилизованная форма улучшает читабель­ность и понимание, что облегчает работу с ней. Сейчас мы придадим фор­ме определенный стиль.

Применение правил CSS

Вам доступен широкий выбор типов элементов форм, но все они облада­ют сходными характеристиками, например тег . Этим элементам можно придавать стиль средствами CSS.

В данном упражнении мы создадим таблицу стилей, содержащую форма­тирование для вашей формы, и добавим правила для легенды и элемен­тов набора полей.

1. Выполните команду Window = CSS Styles.

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

2. В нижней части панели CSS Styles щелкните по кнопке Attach Style Sheet (Присоединить таблицу стилей).

3. В появившемся диалоговом окне Attach External Style Sheet (При­соединить внешнюю таблицу стилей) в поле File/URL (Файл или URL-адрес) введите «forms.css». В опции Addas (Добавить как) пометьте Link (Ссылка), а в меню Media (Мультимедиа) выберите screen (экран). Щелкните по кнопке ОК (рисунок 7.28).

Рисунок 7.28 - Диалоговое окно Attach External Style Sheet

4. Dreamweaver предупредит вас, что таблицы стилей с таким именем не существует. Щелкните по кнопке Yesдля перехода по ссылке.

5. В области окна AllRules панели CSS выберите forms.ess в качестве источника. Затем щелкните по кнопке (+), чтобы добавить новое пра­вило CSS.

6. В диалоговом окне NewCSSRule (Новые правила CSS) в меню Se­lectorТуре выберите Tag(redefines anHTML element) (Тег (пере­определяет элемент HTML)). В поле выбора имени SelectorName введите «legend» или сделайте выбор в меню. В разделе RuleDefini­tion должен быть выбран файл forms.css. Щелкните по кнопке ОК (рисунок 7.29).

Рисунок 7.29 - Диалоговое окно New CSS Rule

7. Dreamweaver предупредит вас, что таблицы стилей с таким именем не существует, и предложит создать ее. Щелкните по кнопке Yes.

8. В диалоговом окне CSS Rule Definition for legend in forms.css (Опре­деление правила CSS для legend в forms.css) выберите категорию Type. В поле Font-size (Размер шрифта) введите 110 и выберите % в меню рядом. В меню Font-weight выберите bold (полужирный). В поле Color введите «#345FA3». Щелкните по кнопке ОК (рисунок 7.30).

Рисунок 7.30 - Диалогове окно CSS Rule Definition (Type)

9. На панели CSS Styles щелчком по кнопке (+) добавьте новое прави­ло CSS.

10. В диалоговом окне New CSS Rule в меню Selector Туре выберите Tag (redefines an HTML element). В поле Selector Name введите «fieldset» или выберите его, используя всплывающее меню. В разде­ле Rule Definitionдолжен быть выбран файл forms.css. Щелкните по кнопке ОК (рисунок 7.31).

Рисунок 7.31 - Диалоговое окно New CSS Rule

11. В диалоговом окне CSS Rule Definition for fieldset in forms .ess выберите категорию Box. В категории Padding введите 10 в поле Тор. В меню Margin снимите флажок с Same for all и введите 5 в поле Bottom. Примите по умолчанию пиксели для всех измерений.

Рисунок 7.32 - Диалогове окно CSS Rule Definition (Box)

12. Выберите категорию Border (Граница). В поле Style выберите solid (сплошная). В поле Width выберите thin(тонкая). В поле Color введите «#345FA3».

13. Введенные значения будут заданы для всех полей набора, поскольку опция Same for all помечена флажком. Щелкните по кнопке ОК (рисунок 7.33).

Рисунок 7.33 - Диалогове окно CSS Rule Definition (Border)

14. Выполните команду File = Save All.

15. Теперь легенда и набор полей выглядят более правильно в обновленном режиме страницы, нежели ранее в режиме отображения Design.

16. Выберите Live View или откройте страницу в браузере.

17. Вновь выберите Live View или закройте браузер, чтобы вернуться в режим редактирования Dreamweaver.

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

Рисунок 7.34 - Итоговая веб-страница

Ответьте на контрольные вопросы.

1. Каково предназначение тега ?

2. Как активировать свойства доступности для форм в Dreamweaver?

3. Что дает опция Attach label tag using ‘for’ attribute?

4. В чем состоит преимущество виджетов Spry Form над стандартными объектами форм?

5. В чем разница между обычным текстовым полем и текстовой областью?

6. Как понять, что отдельные кнопки-переключатели входят в одну группу?

7. В чем основное различие между кнопками-переключателями и флажками?

8. Что делает тег ?

Контрольное задание

1. Подберите материал для своего веб-сайта.

2. Реализуйте шестую страницу своего веб-сайта.

Требования к веб-странице:

1. Создать как минимум 4 формы (текстовые элементы, флажки, кнопки-переключатели, списки).

2. Если не заполнены контактные сведения (обязательные поля), вывести сообщение с просьбой заполнить их.

3. Если возраст заказчика меньше 18-ти, тогда вывести сообщение «Заказы принимаются только у совершеннолетних».

4. Создать кнопку отправки данных.