Уроки Dreamweawer

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать папку dream_dop для изучения курса «Уроки Dreamweaver» (5 Мб)

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

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

Задачи:

Научиться вставлять форму.
Научиться включать текстовые поля.
Научиться работать с виджетами Spry.
Научиться вставлять кнопки-переключатели.
Научиться вставлять флажки.
Научиться вставлять списки.
Научиться добавлять кнопки формы.
Научиться внедрять наборы полей и легенды.
Научиться придавать стиль форме средствами CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В следующих упражнениях мы будем вставлять стандартные текстовые поля, поля 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 вставляет код:

<label for=«name»>Имя</label><input type=«text» id=«name» />

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

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

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

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

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

В уроке 6 вы познакомились со структурой Spry для Ajax и поработали с такими инструментами Spry, как Spry Data и 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 tag using '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 (Исходный).

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

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

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

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

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

<label for="name">Имя</label>
<input type="text" name="name" id="name" />
<br />
<span id="sprytextfield1">
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>

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 Validation Text Field (Текстовая область проверки Spry).

3. В диалоговом окне Input Tag Accessibility Attributes в поле ID введите «Username» и нажмите Tab. В поле Label введите «Имя пользователя» и также нажмите Tab. Убедитесь, что в разделе Style выбрана опция Attachlabeltagusing'for'attribute, а в разделе Position — опция Before 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 tag using 'for' attribute, а в разделе Position — опция Before 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. Поместите курсор под последним набором полей, но внутри красной границы. При необходимости щелкните внутри него, затем щелкните по тегу <fieldset> в селекторе тегов и нажмите стрелку вправо на клавиатуре, чтобы перейти через него. В категории 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 (<br> tags) (Перевод строки (теги <br>)) — разбиение строк. Щелкните по кнопке ОК (рисунок 7.20).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 выберите тег <fieldset> (рисунок 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

Вам доступен широкий выбор типов элементов форм, но все они обладают сходными характеристиками, например тег <label>. Этим элементам можно придавать стиль средствами 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) в меню SelectorТуре выберите Tag(redefines an HTML element) (Тег (переопределяет элемент HTML)). В поле выбора имени SelectorName введите «legend» или сделайте выбор в меню. В разделе RuleDefinition должен быть выбран файл 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 - Итоговая веб-страница

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

Каково предназначение тега <form>?
Как активировать свойства доступности для форм в Dreamweaver?
Что дает опция Attach label tag using ‘for’ attribute?
В чем состоит преимущество виджетов Spry Form над стандартными объектами форм?
В чем разница между обычным текстовым полем и текстовой областью?
Как понять, что отдельные кнопки-переключатели входят в одну группу?
В чем основное различие между кнопками-переключателями и флажками?
Что делает тег <fieldset>?

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

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

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

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