Техника Web-дизайна для студента
Создание форм в программе Dreamweaver
Для создания форм на web-странице, редактируемой в программе Dreamweaver, необходимо воспользоваться группой инструментов FoRms (Формы) панели Insert (Вставка) (рис. 6.4).
Forms ▼ |
Гг 1 ГГ-, |
Ыш/ш |
[QJ [RJ О |
Abcl if 1 |
Рис. 6.4. Группа инструментов Forms панели Insert |
Кнопки на вкладке FoRms (Формы) располагаются в следующем порядке:
О Form (Форма) — предназначена для создания контейнера будущей формы. После щелчка по кнопке Form на странице появится прямоугольник, ограниченный прерывистой линией, а в тексте документа появится пара меток <form>...</form>. Курсор будет мерцать внутри прямоугольного контейнера, поэтому достаточно щелкнуть по кнопке с изображением одного из элементов формы и он появится внутри контейнера. Одновременно с созданием контейнера панель свойств Properties (Свойства) приобретет вид, приведенный на рис. 6.5.
Рис. 6.5. Панель свойств с полями для изменения свойств формы |
На панели свойств Properties (Свойства) можно изменить свойства формы.
В поле Form Name (Имя формы) указывают новое имя формы, а в поле Action (Действие) — URL-адрес получателя данных из формы.
В списке Method (Метод) можно выбрать метод пересылки данных.
Список Target (Цель) позволяет выбрать окно или фрейм, в который будет загружен документ, присланный с сервера в
Ответ на пересылку формы:____ self — текущее окно или фрейм,
_parent — родительский фрейм, _top — полное окно, _blank — новое окно.
В списке Enctype выбирается значение параметра enctype, т. е. формат кодирования данных при пересылке, а при отсутствии нужного формата в списке его нужно вписать вручную. Для пересылки данных по почте необходимо выбрать значение text/plain.
В списке Class (Класс) задается значение параметра class, т. е. стиль форматирования формы (см. главу 7). Для всех описанных ниже элементов список Class (Класс) имеет то же назначение;
□ Text Field (Текстовое поле) — создает однострочное текстовое поле. В текст документа вставляется метка <input> с параметром type=text. На панели свойств Properties (Свойства) появится все необходимое для изменения свойств этого элемента формы, и даже возможность превращения его в другой элемент (рис. 6.6).
Рис. 6.6. Панель свойств с полями для изменения свойств текстового ПОЛЯ |
В поле TextField можно изменить имя элемента формы, в поле Char width — установить максимальное количество отображаемых символов, в поле Max Chars — максимальное количество символов в строке (по умолчанию не ограничивается), в поле luit val — задать начальное содержимое текстового поля.
Переключатель Туре (Тип) может находиться в одном из трех положений:
• Single line — однострочное текстовое поле;
• Multi line — многострочное текстовое поле;
• Password — однострочное текстовое поле для ввода пароля (вводимые символы отображаются звездочками).
Выбор положения Multi line приведет не только к смене внешнего вида элемента, но и замене метки <input> на
<TEXTAREA>;
О Hidden Field (Скрытое поле) — создает скрытое однострочное текстовое поле. Это поле не отображается браузером и поэтому скрыто от пользователя, но оно может содержать текстовую информацию, которая будет передана вместе с формой. Панель Properties (Свойства) содержит только два поля:
• HiddenField — для изменения имени элемента формы,
• Value (значение) — для ввода передаваемого текста;
О Textarea (Текстовая область) — создает многострочное текстовое поле. В текст документа вставляется метка <textarea>. Панель свойств Properties (Свойства) приобретает вид, показанный на рис. 6.7.
Рис. 6.7. Панель свойств с полями для изменения свойств многострочного текстового ПОЛЯ |
Напомним, для того чтобы была видна нижняя половина панели Properties (Свойства), нужно щелкнуть по треугольной стрелке в правом нижнем углу панели. Несмотря на увеличение размера панели свойств по сравнению с элементом Text Field (Текстовое поле), она не претерпела серьезных изменений. Вместо поля Max Chars появилось поле Num LinEs — число отображаемых строк и дополнительно появился список Wrap, позволяющий выбрать способ перехода на новую строку. В списке можно выбрать следующие значения:
• Default — по умолчанию;
• Off — выключен автоматический переход на новую строку;
• Virtual — текст автоматически переходит на новую строку при достижении максимальной ширины, но символ перехода не вставляется в текст и он будет передан одной строкой (действует по умолчанию);
• Physical — текст автоматически переходит на новую строку и вставляется символ перехода;
О Checkbox (Флажок) — создает поле для установки флажка. В текст документа будет вставлена метка <input> с параметром type=checkbox. Панель свойств Properties (Свойства) для этого элемента содержит следующие поля: Check Box name (Имя флажка) — для изменения имени элемента и Checked
Value — для ввода текста, который будет передан вместе с формой, если флажок установлен. Кроме того, на панели свойств имеется переключатель Initial State (Начальное состояние), позволяющий выбрать начальное состояние поля: Checked — флажок установлен, Unchecked — флажок снят;
О Radio Button (Элемент переключателя) — создает элемент переключателя, существующий в составе группы. В текст документа вставляется метка <input> с параметром type=radio. На панели Properties (Свойства) появятся следующие поля: Radio Button (Элемент переключателя) — изменение имени элемента, Checked value — ввод текста, который будет передан вместе с формой в случае выбора данного элемента. Переключатель Initial State (Начальное состояние) позволяет отметить данный элемент как выбранный (Checked) или нет (Unchecked);
В поле Name (Имя) вносится имя переключателя, которое будет присвоено каждому элементу группы. Для добавления |
О Radio Group (Переключатель) — открывает одноименное диалоговое окно для создания переключателя, содержащего несколько элементов, и оформления его внешнего вида (рис. 6.8).
Рис. 6.8. Диалоговое окно для создания переключателя Radio Group |
Нового элемента необходимо нажать кнопку с изображением плюса, для удаления выделенного — кнопку с изображением минуса. В столбце Label (Подпись) содержатся подписи к элементам переключателя, а в столбце Value (Значение) — текст, передаваемый вместе с формой, в случае выбора данного элемента. Кнопки с треугольными стрелками позволяют изменить порядок следования элементов. Переключатель Lay out using (Расположение) позволяет выбрать способ оформления группы. Выбор LinE breaks (<br> tags) означает, что элементы переключателя будут расположены в столбец с помощью меток <br>, а выбор Table позволяет расположить группу с помощью таблицы. Результат показан на рис. 6.9;
Рис. 6.9. Результат создания переключателя Radio Group |
□ List/Menu (Список/Меню) — создает список, из которого можно выбрать одно или несколько значений. В документ список будет вставлен с помощью метки <select>. Изменение параметров списка осуществляется с помощью панели свойств Properties (Свойства) (рис. 6.10). Данная панель содержит специальное поле List/Menu (Список/Меню) для задания имени списка. Переключатель Туре (Тип) предназначен для выбора типа списка. Тип Menu отличается тем, что до раскрытия списка видимым является только один элемент, и после его раскрытия можно выбрать также только один элемент. Выбор типа LisT позволяет изменить число видимых элементов списка, задав их число в поле Height (Высота). Установка флажка Selections Allow multiple (Разрешить многократный выбор) разрешает одновременное выделение нескольких элементов.
Рис. 6.10. Панель свойств с полями для изменения свойств списка значений |
В окне браузера элементы, идущие подряд, можно выделить, удерживая клавишу <Shift>. Для выделения необходимых элементов в произвольном порядке используют клавишу <Ctrl>.
Независимо от выбранного типа списка его заполнение осуществляется в диалоговом окне LisT Values (Список значений) (рис. 6.11), которое открывается после щелчка по одноименной кнопке.
Рис. 6.11. Диалоговое окно List Values |
Добавление элемента списка осуществляется после нажатия кнопки с изображением плюса, удаление — кнопки с изображением минуса. В столбце Item Label (Текст элемента) перечисляется содержимое списка, а в столбце Value (Значение) — текст, передаваемый в случае выбора данного элемента. Изменение порядка следования элементов осуществляется кнопками с треугольными стрелками. После нажатия OK содержимое списка появится в поле Initially Selected (Предварительно отобранные);
О Jump Menu (Список перехода) — открывает диалоговое окно Insert Jump Menu (Вставка списка перехода) (рис. 6.12), позволяющее создать раскрывающийся список аналогичный List/Menu. Следует иметь в виду, что при выборе элементов списка в окне браузера будут осуществляться переходы на другие документы, которые создаются не путем создания гиперссылок, а с помощью программы-сценария на языке JavaScript, которая автоматически вставляется в текст документа.
Рис. 6.12. Диалоговое окно Insert Jump Menu |
Добавление новых элементов списка осуществляется нажатием кнопки со знаком плюс, удаление — кнопки со знаком минус. Значение элемента вписывается в поле Text (Текст), а в поле Menu iteMs (Список элементов), оно будет продублировано автоматически. В поле When selected, go to URL (Перейти к документу после выделения) вводится имя файла документа, на который должен осуществиться переход. Список Open URLs In (Открывать адресуемые документы в) содержит единственное значение Main Window — главное окно. В поле
Menu Name (Имя списка) указывается имя списка. В группе Options (Выбор) можно установить флажки Insert Go Button After Menu (Вставить кнопку GO после списка) и Select First Item After URL Change (Выделить первое значение после адресации). Изменение параметров на панели свойств Properties (Свойства) аналогично работе со списком List/Menu (Список/Меню);
О Image Field (Графическое поле) — вставляет графическое изображение, которое будет выполнять роль кнопки SUBMIT, т. е. щелчок по изображению в окне браузера приведет к отправке формы по назначению. В текст документа будет вставлена метка <input> с параметром type=image. Панель свойств имеет следующие поля:
• Image Field — имя элемента;
. W (Width) — ширина рисунка;
• Н (Height) — высота рисунка;
• Src — имя файла рисунка;
• Alt — текст, появляющийся в виде всплывающей подсказки;
• Align (Выравнивание) — список значений, определяющих способ выравнивания изображения, известный по выравниванию обычных изображений.
Щелчок по кнопке Edit Image (Редактирование изображения) на панели свойств Properties (Свойства) откроет изображение в окне графического редактора;
О File Field (Поле файла) — позволяет создать поле для ввода имени локального файла, который требуется переслать вместе с формой. Рядом с полем будет выводиться кнопка Browse (Обзор) для поиска и выбора файла. В текст документа будет вставлена метка <input> с параметром type=file. Панель свойств Properties (Свойства) в этом случае будет содержать поля:
• FileField name — для изменения имени элемента;
• Char width — для задания максимального количества отображаемых символов;
• Max chars — для задания максимальной длины пути к файлу;
□ Button (Кнопка) — создает кнопку. В текст документа будет вставлена метка <input> с параметром type, значения которого зависят от выбранного положения переключателя Action (Действие) на панели свойств Properties (Свойства). Выбор Submit form означает создание кнопки для отправки содержимого формы к месту назначения. Параметру type будет присвоено значение "submit". Переключатель в положении Reset form позволяет создать кнопку сброса содержимого формы, параметру type присваивается значение "reset". Положение переключателя None означает, что выбрана обычная кнопка, а параметру type будет присвоено значение "button". Обычная кнопка используется только совместно с программой-сценарием, которая должна запускаться при ее нажатии. Подобные примеры будут рассмотрены в главе 8. Следует отметить наличие на панели Properties (Свойства) еще двух полей: Button Name (Имя кнопки) — для изменения имени кнопки и Label (Надпись) — надписи на кнопке;
О Label (Надпись) — вставляет в текст документа метку <LABEL>...</LABEL>. TCKCT Внутри MCTKI1 ИСПОЛЬЗуеТСЯ В КаЧС - стве подписи к элементу формы;
О Fieldset (Составное поле) — создает элемент, объединяющий несколько элементов формы в одну группу при помощи рамки и обобщающей надписи. Текст надписи указывается в диалоговом окне Fieldset (Составное поле), которое открывается после нажатия кнопки. Объединяемые объекты предварительно должны быть выделены. Результат объединения можно увидеть в окне браузера.