Техника Web-дизайна для студента

Создание форм в программе Dreamweaver

Для создания форм на web-странице, редактируемой в програм­ме Dreamweaver, необходимо воспользоваться группой инстру­ментов FoRms (Формы) панели Insert (Вставка) (рис. 6.4).

Кнопки на вкладке FoRms (Формы) располагаются в следующем порядке:

О Form (Форма) — предназначена для создания контейнера бу­дущей формы. После щелчка по кнопке Form на странице поя­вится прямоугольник, ограниченный прерывистой линией, а в тексте документа появится пара меток <form>...</form>. Курсор будет мерцать внутри прямоугольного контейнера, поэтому достаточно щелкнуть по кнопке с изображением одного из элементов формы и он появится внутри контейнера. Одновре­менно с созданием контейнера панель свойств Properties (Свойства) приобретет вид, приведенный на рис. 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).

В поле 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.

Напомним, для того чтобы была видна нижняя половина па­нели 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);

О Radio Group (Переключатель) — открывает одноименное диа­логовое окно для создания переключателя, содержащего не­сколько элементов, и оформления его внешнего вида (рис. 6.8).

Нового элемента необходимо нажать кнопку с изображением плюса, для удаления выделенного — кнопку с изображением минуса. В столбце Label (Подпись) содержатся подписи к элементам переключателя, а в столбце Value (Значение) — текст, передаваемый вместе с формой, в случае выбора дан­ного элемента. Кнопки с треугольными стрелками позволяют изменить порядок следования элементов. Переключатель Lay out using (Расположение) позволяет выбрать способ оформле­ния группы. Выбор LinE breaks (<br> tags) означает, что эле­менты переключателя будут расположены в столбец с помо­щью меток <br>, а выбор Table позволяет расположить группу с помощью таблицы. Результат показан на рис. 6.9;

□ List/Menu (Список/Меню) — создает список, из которого можно выбрать одно или несколько значений. В документ список будет вставлен с помощью метки <select>. Измене­ние параметров списка осуществляется с помощью панели свойств Properties (Свойства) (рис. 6.10). Данная панель со­держит специальное поле List/Menu (Список/Меню) для за­дания имени списка. Переключатель Туре (Тип) предназна­чен для выбора типа списка. Тип Menu отличается тем, что до раскрытия списка видимым является только один элемент, и после его раскрытия можно выбрать также только один элемент. Выбор типа LisT позволяет изменить число видимых элементов списка, задав их число в поле Height (Высота). Ус­тановка флажка Selections Allow multiple (Разрешить много­кратный выбор) разрешает одновременное выделение не­скольких элементов.

В окне браузера элементы, идущие подряд, можно выделить, удерживая клавишу <Shift>. Для выделения необходимых элементов в произвольном порядке используют клавишу <Ctrl>.

Независимо от выбранного типа списка его заполнение осу­ществляется в диалоговом окне LisT Values (Список значений) (рис. 6.11), которое открывается после щелчка по одноимен­ной кнопке.

Добавление элемента списка осуществляется после нажатия кнопки с изображением плюса, удаление — кнопки с изо­бражением минуса. В столбце Item Label (Текст элемента) пе­речисляется содержимое списка, а в столбце Value (Значе­ние) — текст, передаваемый в случае выбора данного элемента. Изменение порядка следования элементов осуще­ствляется кнопками с треугольными стрелками. После нажа­тия OK содержимое списка появится в поле Initially Selected (Предварительно отобранные);

О Jump Menu (Список перехода) — открывает диалоговое окно Insert Jump Menu (Вставка списка перехода) (рис. 6.12), по­зволяющее создать раскрывающийся список аналогичный List/Menu. Следует иметь в виду, что при выборе элементов списка в окне браузера будут осуществляться переходы на другие документы, которые создаются не путем создания ги­перссылок, а с помощью программы-сценария на языке JavaScript, которая автоматически вставляется в текст доку­мента.

Добавление новых элементов списка осуществляется нажати­ем кнопки со знаком плюс, удаление — кнопки со знаком минус. Значение элемента вписывается в поле 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 (Составное поле), которое открыва­ется после нажатия кнопки. Объединяемые объекты предва­рительно должны быть выделены. Результат объединения можно увидеть в окне браузера.