Macromedia Dreamweaver MX

Формы

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

Web-формы — такой же часто встречающийся элемент страниц, как, ска­жем, графические изображения или таблицы. Очень и очень многие сайты содержат анкеты для опроса посетителей. Почтовые системы, работающие через Web-обозреватель ("Web-почта"), спрашивают у вас кодовое имя (или, как говорят опытные интернетчики, ''логин", по-английски — login) и пароль прежде, чем допустить к содержимому вашего почтового ящика. Разнооб­разные сайты-справочники предусматривают возможности поиска, для чего предоставляют специальные формы с полем ввода, где вы должны будете ввести ключевое слово. А электронные магазины требуют у вас почтовый адрес, чтобы отправить вам купленный товар.

Интернет становится все более и более интерактивным, и в дальнейшем эта тенденция будет только нарастать. А для интерактивности ему нужно при­нимать данные от своих пользователей. Единственный в настоящее время способ сделать это — использовать серверные программы и, разумеется, формы.

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

Работа с формами в Dreamweaver

Создайте в Dreamweaver новую страницу. Мы поместим в нее форму, соби­рающую анкетные данные пользователя и отсылающую их гипотетической серверной программе program. exe.

Создание формы

Чтобы поместить на Web-страницу форму, проще всего воспользоваться па­нелью объектов. Для этого переключитесь на вкладку Forms, где находятся кнопки, помещающие на Web-страницу форму или один из предусмотрен­ных в HTML элементов управления. Кнопка, помещающая на страницу форму, показана на рис. 16.1 и называется Form. Также вы можете выбрать пункт Form в меню Insert.

Рис. 16.1. Кнопка Form панели объектов

Пустая форма показывается в виде узкой полоски, ограниченной красной пунктирной рамкой (рис. 16.2). Когда вы поместите что-нибудь в форму, ее размеры соответственно увеличатся.

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

Что может быть бесполезнее пустой формы! Поэтому мы не будем останав­ливаться на ней, а поскорее перейдем к элементам управления. Опишем только, какие параметры вы можете задать для формы. А параметров этих очень и очень немного (рис. 16.3).

W Properties

Method POST

Рис. 16.3. Вид редактора свойств при выделенной форме

Сначала о поле ввода Form Name. В нем вводится имя формы. По умолча­нию Dreamweaver сам подставляет туда автоматически сгенерированное имя вида formi, form2 и т. д. В подавляющем большинстве случаев автоматиче­ски сгенерированного имени будет вполне достаточно; вообще, имя формы особой роли не играет, в отличие от имен элементов управления. Но если вы любите аккуратность во всем, можете задать для своей формы более вра­зумительное имя.

Имя формы вы также можете задать, выбрав пункт Name в контекстном ме­ню формы (т. е. контекстном меню, появляющемся при щелчке правой кнопкой мыши по форме). После этого на экране появится диалоговое окно Change Attribute. Введите новое значение параметра в поле ввода и нажмите кнопку OK для его сохранения или Cancel — для отмены.

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

В комбинированном списке Target задается, как вы помните, цель гипер­ссылки. Конечно, сейчас у нас нет гиперссылки — в данном случае цель задает, куда будет выводиться Web-страница, сгенерированная серверной программой.

Метод пересылки данных задается с помощью раскрывающегося списка Method. В этом списке доступны три пункта: GET, POST и Default. Первые два пункта, как вы поняли, задают метод пересылки, а третий — метод, ис­пользуемый по умолчанию (как правило, GET). Для аналогичных целей служит подменю Method контекстного меню формы, содержащее все те же три пункта.

Кодировка данных формы задается в комбинированом списке Enctype. В этом списке есть два пункта: application/x-www-form-urlencoded и

Multipart/form-data. Если вы собираетесь использовать другую кодировку, например, text/piain, можете ввести ее название прямо в этот список.

( Примечание )

Форма создается с помощью парного тега <form>. . .</form>, внутри которого помещается все содержимое формы, т. е. элементы управления. Атрибут action задает адрес серверной программы, enctype — кодировку, a method — метод отправки данных.

Задайте какие-нибудь данные для нашей формы. И сохраните страницу в файле под именем 16.l. htm.

Вот и все о форме. Теперь пора наполнить ее содержимым.

Элементы управления

Элементы управления помещаются на форму с помощью все той же вклад­ки Forms панели объектов или пунктов подменю Form Objects меню Insert. Ниже мы подробно рассмотрим каждый элемент управления, предлагаемый нам стандартом HTML.

Элементы управления вставляются в "поток" текста и ведут себя как обыч­ные элементы страницы. Вы можете разносить их по текстовым абзацам или помещать в одну и ту же строку, разделяя пробелами. Также вы можете вставлять их в ячейки таблицы и свободно позиционируемые элементы. Чтобы удалить ненужный элемент управления, просто выделите его и на­жмите клавишу <Del>.

Поле ввода

Обычное поле ввода, служащее для ввода текста, самый популярный в фор­мах элемент управления, помещается в форму с помощью кнопки Text Field (рис. 16.4) панели объектов или пункта Text Field подменю Form Objects меню Insert.

Рис. 16.4. Кнопка Text Field панели объектов

Появившееся на экране вновь созданное поле ввода будет выделено. Об этом сигнализирует тонкая штриховая рамка, окружающая его. Таким обра­зом, вы можете сразу же установить необходимые параметры поля ввода (рис. 16.5). Если же поле ввода почему-то не выделено, щелкните по нему мышью.

В поле ввода TextField вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекстном меню поля ввода и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

В поле ввода Char Width задается ширина поля ввода, т. е. его горизонталь­ный размер, в символах.

В поле ввода Мах Chars задается максимальное количество символов, кото­рое может быть введено в созданное на Web-странице поле ввода. Это чис­ло может быть больше, чем Char Width; в этом случае содержимое поля вво­да будет прокручиваться по горизонтали. Но ни в коем случае не задавайте Max Chars меньше, чем Char Width.

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

Группа переключателей Туре задает тип создаваемого поля ввода. Здесь дос­тупны три переключателя:

□ Single line — обычное поле ввода в одну строку;

□ Multi line — многострочное поле ввода, иначе говоря, область редактиро­вания;

□ Password — поле ввода пароля.

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

Область редактирования вам уже знакома. От обычного поля ввода она от­личается тем, что в нее может быть введен многострочный текст. Для облас­ти редактирования Dreamweaver предоставляет дополнительные параметры. Вы увидите их, если выберете переключатель Multi line (рис. 16.6).

Прежде всего, вместо поля ввода Max Chars появится поле Num Lines, в котором задается вертикальный размер области редактирования в строках. Заметьте, что размер текста, который может быть помещен в область редак­тирования, не ограничен.

Вместо поля ввода Init Val появится одноименная область редактирования. В самом деле, для задания начального значения области редактирования обычного поля ввода может быть мало. Обратите внимание, что в этом слу­чае пункт Value из контекстного меню исчезнет.

И — самое важное дополнение. С помощью раскрывающегося списка Wrap задается, как область редактирования будет выполнять перенос текста и в каком виде этот текст будет отправлен серверной программе. В этом спи­ске доступны четыре пункта. Рассмотрим их подробнее.

Пункт Off отключает перенос строк. В этом случае, если текст не помещает­ся в область редактирования по горизонтали, в ней появляется горизон­тальная полоса прокрутки. (При этом пользователь может вставить в текст "жесткий"перевод строки, нажав клавишу <Enter>.)

Если выбран пункт Virtual, область редактирования будет выполнять пере­нос длинных строк, вставляя так называемые "мягкие" переводы строк. При отправке содержимого области редактирования на сервер эти переводы уда­ляются. (Собственно, никаких "мягких" переводов в текст вообще не поме­щается — это просто такой термин.)

Если же выбран пункт Physical, то перед отправкой данных все "мягкие" переводы строк преобразуются в "жесткие". Фактически в нужных местах текста вставляются символы перевода строк.

Последний пункт — Default — задает поведение по умолчанию. Как прави­ло, он аналогичен Off.

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

Если вы в своей форме используете область редактирования, проверьте, за­дан ли в качестве метода передачи данных POST. Поскольку в область ре­дактирования может быть введен очень большой текст, метод GET не смо­жет передать его из-за своих ограничений.

Если вы хотите быстро вставить в форму область редактирования, воспользуй­тесь кнопкой Textarea (рис. 16.7) панели объектов или пунктом Textarea подме­ню Form Objects меню Insert.

Примечание )

Обычное поле ввода создается посредством одинарного тега cinput type= "text">. (Обратите внимание на значение атрибута type.) Поле ввода пароля создается с помощью одинарного тега cinput TYPE="password">, область ре­дактирования — с помощью парного тега ctextarea>. . .c/textarea>, внутри которого помещается содержимое области редактирования. Значение, введен­ное в поле ввода или область редактирования, преобразуется к виду симя поля ввода>=сзначение> и отправляется в таком виде. Имя элемента управления задается атрибутом name тегов cinput> и ctextarea>.

Кнопка

Кнопка — второй по популярности элемент управления в Web-формах. Для помещения ее в форму используется кнопка Button (рис. 16.8) панели объ­ектов или пункт Button подменю Form Objects меню Insert. Доступные па­раметры показаны на рис. 16.9.

Рис. 16.8. Кнопка Button панели объектов

Action С* Submit form C~ None f4 Reset form

Рис. 16.9. Вид редактора свойств при выделенной кнопке

В поле ввода Button Name вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, имеющее вид Submit (для кнопки отправки данных), Reset (для кнопки сброса) или Button (для обычной кнопки). Как правило, этого имени впол­не достаточно, но вы, если хотите, можете его изменить. Вы также можете выбрать пункт Name в контекстном меню кнопки и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

В поле ввода Label вводится текст, который будет отображаться на кнопке, иначе говоря, надпись на кнопке. Dreamweaver сам подставит туда текст Submit (для кнопки отправки данных), Reset (для кнопки сброса) или Button (для обычной кнопки). Естественно, его придется менять на аналогичные
русские надписи. Вы также можете выбрать пункт Label в контекстном ме­ню кнопки и изменить этот текст в появившемся на экране диалоговом ок­не Change Attribute.

С помощью группы переключателей Action задается действие, происходящее при нажатии этой кнопки. Здесь доступны три переключателя:

□ Submit form — отправка данных, введенных в форму, серверной про­грамме (кнопка отправки данных)

□ Reset form — сброс данных, введенных в форму (точнее, замена их на­чальными значениями) (кнопка сброса формы):

□ None — ничего не происходит ("кнопка-бездельник”).

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

Но зачем нужны кнопки, при нажатии на которых ничего не происходит? Собственно, в форме они не нужны. Такие кнопки работают вместе со сце­нариями; при нажатии на такую кнопку запускается сценарий, выполняю­щий какое-либо действие над Web-страницей. Так что вы можете привязать к такой кнопке какое-либо поведение (о поведениях см. главу 13).

( Примечание )

Кнопка отправки данных создается с помощью одинарного тега cinput TYPE="submit">, кнопка сброса данных формы — cinput TYPE="reset">, "кнопка-бездельник" — cinput TYPE="button">. Каждая кнопка формирует данные в виде пары симя кнопки>=1 и отсылает их серверной программе, но эти данные практически никогда реально не обрабатываются.

Флажок

Флажки используются в формах также довольно часто. Для помещения его в форму используется кнопка Checkbox (рис. 16.10) панели объектов или пункт Check Box подменю Form Objects меню Insert. Доступные параметры показаны на рис. 16.11.

Рис. 16.10. Кнопка Checkbox панели объектов

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

Name в контекстном меню флажка и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

В поле ввода Checked Value вводится текст, отправляемый серверной про­грамме, если флажок будет включен посетителем, т. е. если флажок будет включен, он отправит такую пару:

<Имя флажка>=<3начение Checked Value>

Если же флажок не был включен, отправляемая пара будет, так сказать, "неполной":

<Имя флажка>=

Вы также можете выбрать пункт Value в контекстном меню флажка и изме­нить отправляемый текст в появившемся на экране диалоговом окне Change Attribute.

Группа переключателей Initial State задает начальное состояние флажка. Если включен переключатель Unchecked, флажок будет отключен (значение по умолчанию), а переключатель Checked сделает его изначально вклю­ченным.

Примечание

Флажок создается с помощью одинарного тега cinput TYPE="checkbox">.

Переключатели

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

Для помещения в форму переключателя используется кнопка Radio Button (рис. 16.12) панели объектов или пункт Radio Button подменю Form Objects меню Insert. Доступные параметры показаны нарис. 16.13.

В поле ввода RadioButton вводится уникальное имя группы переключателей. Переключатели, входящие в одну группу, должны иметь одно и то же имя. В данном случае принцип "каждому элементу управления — уникальное имя" нарушается. Уникальное имя должна иметь каждая группа переключа­телей.

Dreamweaver автоматически подставит в поле ввода RadioButton сгенериро­ванное им самим имя, но вам сразу же следует его изменить. Вы также мо­жете выбрать пункт Name в контекстном меню переключателя и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

В поле ввода Checked Value вводится текст, отправляемый серверной про­грамме, если переключатель будет включен посетителем, т. е. если он будет включен, серверной программе будут отправлены такие данные:

<Имя группы переключателей>=<3начение Checked Value>

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

<Имя группы переключателей>=

Вы также можете выбрать пункт Value в контекстном меню переключателя и изменить отправляемый текст в появившемся на экране диалоговом окне Change Attribute.

Группа переключателей Initial State задает начальное состояние созданного вами переключателя. Если включен переключатель Unchecked, наш пере­ключатель будет отключен (значение по умолчанию), а переключатель Checked сделает его изначально включенным. Но не забудьте, что соглаше­ния фирмы Microsoft о пользовательском интерфейсе Windows-приложений требуют, чтобы один из переключателей в группе обязательно был включен изначально.

Примечание

Переключатель создается с помощью одинарного тега cinput TYPE="radio">.

Группа переключателей

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

Чтобы создать в форме группу переключателей, нажмите кнопку Radio Group (рис. 16.14) панели объектов или выберите пункт Radio Group подме­ню Form Objects меню Insert. После этого на экране появится диалоговое окно Radio Group (рис. 16.15).

В поле ввода Name этого окна вводится уникальное имя создаваемой груп­пы переключателей. Dreamweaver автоматически подставит туда сгенериро­ванное им самим имя, но вам сразу же следует его изменить.

Все созданные вами переключатели группы отображаются в списке Radio Buttons. Этот список состоит из двух колонок: Label (надпись возле пере­ключателя) и Value (значение, отсылаемое серверной программе, если этот переключатель был включен посетителем). Вы можете выбрать любой пункт этого списка и произвести над ним некоторые манипуляции.

Как видите, Dreamweaver уже создал для вас два переключателя; вам остает­ся только задать для них надпись и значение. Для этого выберите нужный пункт списка и щелкните по значению, находящемуся в соответствующей колонке. Вместо значения появится небольшое поле ввода; введите, что хо­тите, и нажмите клавишу <Enter>.

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

Чтобы удалить ненужный переключатель, выберите в списке соответствую­щий ему пункт и нажмите кнопку со знаком "минус".

Кнопки | и 4 позволят вам переместить выбранный пункт списка на пози­цию выше и ниже.

Группа переключателей Lay Out Using позволяет задать, каким образом пе­реключатели создаваемой группы будут размещаться в форме. Если включен переключатель Line Breaks (<br> Tags), переключатели будут размещены в одном текстовом абзаце и отделены друг от друга тегом разрыва строки <br>. Если же включен переключатель Table, Dreamweaver поместит все соз­даваемые переключатели в таблицу.

Задав нужные данные, нажмите кнопку ОК. Если вы передумали создавать группу переключателей, нажмите кнопку Cancel.

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

Список

Для помещения в форму обычного или раскрывающегося списка использу­ется кнопка List/Menu (рис. 16.16) панели объектов или пункт List/Menu подменю Form Objects меню Insert. Доступные параметры показаны на рис. 16.17.

В поле ввода List/Menu вводится уникальное имя списка. Dreamweaver ав­томатически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекст­ном меню списка и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

С помощью группы переключателей Туре вы можете выбрать между обыч­ным списком (переключатель Menu) и раскрывающимся списком (переклю­чатель List).

При нажатии на кнопку List Values на экране появляется диалоговое окно List Values. Это окно показано на рис. 16.18. В нем вы сможете ввести
пункты, которые будут отображаться в создаваемом вами списке. Вызвать это окно можно также, выбрав пункт List Items в контекстном меню списка.

Cancel

Help

Рис. 16.18. Диалоговое окно List Values

Большую часть этого окна занимает список пунктов. Каждая позиция этого списка состоит из двух полей: поля названия пункта (Item Label), которое отображается в форме, и поля значения (Value), которое будет отправлено серверной программе, если этот пункт будет выбран, т. е. отправлена будет такая пара:

<Имя списка>=<3начение пункта>

Если ни один из пунктов списка не будет выбран, серверная программа по­лучит уже знакомую вам "неполную" пару:

<Имя списка>=

При щелчке на строке списка в одной из колонок там появится поле ввода, где вы сможете ввести либо название пункта, либо его значение. Нажимая клавишу <ТаЬ>, вы сможете перемещаться по позициям списка, от первой до последней. Если вы нажмете эту клавишу, находясь в колонке Value по­следней позиции списка, в список будет добавлена новая пустая позиция.

Кнопка со знаком "плюс" позволяет добавить в список новую позицию, кнопка со знаком "минус" удаляет выбранную. Кнопки t и 4 перемещают выбранную позицию списка выше или ниже.

Введя все пункты создаваемого списка, нажмите кнопку ОК, после чего список будет заполнен введенными пунктами.

В списке Initially Selected вы сможете задать пункт создаваемого на Web - странице списка, который будет выбран в нем изначально.

Если в наборе Туре выбран переключатель List (т. е. создается список), ста­новятся доступными поле ввода Height и флажок Allow Multiple.

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

Флажок Allow Multiple позволяет включить особый режим работы списка, при котором пользователь может выбрать в нем несколько пунктов. Для этого он должен будет, щелкая мышью на нужных пунктах, удерживать на­жатой клавишу <Ctrl>. Он также может выбрать целую группу пунктов, сначала щелкнув на первом пункте, а потом — на последнем, удерживая клавишу <Shift>. В этом случае серверная программа получит следующую пару:

<Имя списка>=<3начение пункта 1>, <3начение пункта 2>, ...

( Примечание )

И обычный, и раскрывающийся списки создаются с помощью одного и того же парного тега <select>. . .</select>, внутри которого помещается набор тегов, определяющих отдельные пункты. Атрибут size задает высоту списка; если его значение равно 1, отображается раскрывающийся список, если же оно боль­ше 1 — обычный. Отдельный же пункт списка создается с помощью парного те­га <option>. .. </option>. Название пункта помещается внутрь этого тега, а значение задает атрибут value. Атрибут selected тега <option> позволяет сделать пункт изначально выделенным; этот атрибут не имеет значения — дос­таточно только его присутствия в теге.

Поле ввода имени файла

Поле ввода имени файла позволит вам отправить серверной программе це­лый файл. Единственное условие: данные должны быть закодированы с ис­пользованием кодировки multipart/form-data и отправлены с помощью ме­тода POST.

Поле ввода имени файла внешне представляет собой обычное поле ввода. Справа от него расположена кнопка Обзор (Browse), открывающая стан­дартное диалоговое окно открытия файла Windows. И поле ввода, и кнопка представляют собой один элемент управления.

Для помещения в форму поля ввода имени файла используется кнопка File Field (рис. 16.19) панели объектов или пункт File Field подменю Form Ob­jects меню Insert. Доступные параметры показаны на рис. 16.20.

Рис. 16.19. Кнопка File Field панели объектов

В поле ввода FileField Name вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт

Name в контекстном меню поля ввода и изменить это имя в появившемся на экране диалоговом окне Change Attribute.

FileField Name

Рис. 16.20. Вид редактора свойств при выделенном поле ввода имени файла

В поле ввода Char Width задается ширина поля ввода, т. е. его горизонталь­ный размер, в символах.

В поле ввода Мах Chars задается максимальное количество символов, кото­рое может быть введено в данное поле ввода. Это число может быть боль­ше, чем Char Width; тогда содержимое поля ввода будет прокручиваться по горизонтали. Но ни в коем случае не задавайте Мах Chars меньше, чем Char Width.

Очень странно, но поля ввода Init Val, в котором задается начальное значе­ние имени файла, в этом случае не предусмотрено. Однако вы можете вы­брать в контекстном меню поля ввода пункт Value и изменить начальное значение в диалоговом окне Change Attribute.

Примечание )

Поле ввода имени файла создается с помощью одинарного тега сшрит Т¥РЕ="і:і1е">.

Графическая кнопка

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

Для помещения графической кнопки в форму используется кнопка Image Field (рис. 16.21) панели объектов или пункт Image Field подменю Form Ob­jects меню Insert. После этого на экране появится диалоговое окно Select File, в котором вы должны будете выбрать файл графического изображения. После нажатия кнопки открытия графическая кнопка будет создана.

Доступные параметры графической кнопки показаны на рис. 16.22.

Г Properties

' Align [с

Рис. 16.22. Вид редактора свойств при выделенной графической кнопке

В поле ввода ImageField вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекстном меню графической кнопки и изменить это имя в по­явившемся на экране диалоговом окне Change Attribute.

Графическая кнопка отправляет серверной программе целых две пары зна­чений вида:

<Имя графической кнопки>.х=Х <Имя графической кнопки>.y=Y

Где х и Y — координаты точки на графической кнопке, на которой пользо­ватель щелкнул мышью.

В полях ввода W и Н вводятся, соответственно, ширина и высота графиче­ской кнопки в пикселах. Dreamweaver сам рассчитывает эти величины и помещает их в названные поля. Если вы хотите уменьшить или увеличить графическую кнопку, измените их вручную. Маркеров изменения размеров Dreamweaver в этом случае почему-то не предусматривает.

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

В поле ввода Alt задается "альтернативный" текст, отображаемый вместо графической кнопки, если она еще не загружена, или если пользователь запретил загрузку графических изображений в настройках ¥еЬ-обозре - вателя. Вы также можете выбрать в контекстном меню графической кнопки пункт Alt Text и задать этот текст в появившемся на экране диалоговом ок­не Change Attribute.

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

□ Тор — верх кнопки выравнивается по верхнему краю окружающего текста;

□ Middle — середина кнопки выравнивается посередине окружающего текста;

□ Bottom — низ кнопки выравнивается по нижнему краю окружающего текста;

□ Left — кнопка прижимается к левому краю страницы. Все остальное со­держимое страницы обтекает кнопку;

□ Right — кнопка прижимается к правому краю страницы;

□ Browser Default — выравнивание по умолчанию, как правило, аналогично Bottom.

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

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

( Примечание )

Графическая кнопка создается с помощью одинарного тега cinput type= " image ">.

Скрытое (невидимое) поле

Скрытое поле — это особый элемент управления, вообще не отображаю­щийся в Web-странице. Значение, изначально присвоенное скрытому полю, не может быть изменено посетителем сайта. Можете считать, что это своего рода "тайные" данные, "спрятанные" в форме и недоступные посетителю.

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

Для помещения в форму скрытого поля используется кнопка Hidden Field (рис. 16.23) панели объектов или пункт Hidden Field подменю Form Objects меню Insert. Помещенное в форму скрытое поле показано на рис. 16.24, а очень немногие доступные для него параметры — на рис. 16.25.

В поле ввода HiddenField вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекстном меню скрытого поля и изменить это имя в появив­шемся на экране диалоговом окне Change Attribute.

В поле ввода Value задается значение, которое будет отправлено скрытым полем серверной программе. Вы также можете выбрать пункт Value в кон­текстном меню скрытого поля и задать значение в появившемся на экране диалоговом окне Change Attribute.

Примечание

Скрытое поле создается с помощью одинарного тега cinput TYPE="hidden">.

Дополнительные элементы управления

Дополнительные элементы управления служат не для ввода данных, а для удобства посетителя страницы. Они поддерживаются только достаточно но­выми программами Web-обозревателей, а именно Internet Explorer, начиная с версии 5.0, Navigator, начиная с версии 6.0, и всеми версиями Opera и Mozilla.

Метка

Метка — это просто текстовая подпись, добавляемая к обычному элементу управления, например, полю ввода или переключателю.

Чтобы привязать метку к элементу управления, выделите его и нажмите кнопку Label (рис. 16.26) панели объектов или выберите пункт Label под­меню Form Objects меню Insert. После этого Dreamweaver переключится в режим отображения содержимого страницы и ее HTML-кода, и в окне документа вы увидите такой код:

<LABEL> ...Код элемента управления... </LABEL>

....

Как видите, метка создается с помощью парного тега <label>. HTML-код элемента управления, к которому привязывается метка, находится внутри этого тега. Текст же метки вводится также внутрь этого тега, перед кодом элемента управления или после него. В первом случае текст метки появится перед элементом управления, а во втором — после него.

Например, следующий код поместит на Web-странице метку и — после нее — поле ввода:

<ЬАВЕЬ>Поле ввода <INPUT TYPE="text" NAME="textfield"></LABEL>

А этот код поместит поле ввода ниже метки:

<ЬАВЕЬ>Поле BBOfla<BR><INPUT TYPE="text" NAME="textfield"></LABEL>

Можете проверить — оба этих фрагмента кода действительно работают.

Группа

Группа элементов управления — это простой прямоугольник, объединяю­щий несколько элементов управления и имеющий текстовую метку.

Чтобы объединить несколько элементов управления в группу, выделите их и нажмите кнопку Fieldset (рис. 16.27) панели объектов или выберите пункт Fieldset подменю Form Objects меню Insert. После этого Dreamweaver пере­ключится в режим отображения содержимого страницы и ее HTML-кода и выведет небольшое диалоговое окно Fieldset, показанное на рис. 16.28. Введите в единственное поле ввода этого окна текст метки и нажмите кноп­ку ОК.

После этого вы увидите такой код в окне документа:

<Е1ЕЬ03ЕТ>

<ЬЕСЕШ>Текст метки</ЬЕСЕШ>

...Коды элементов управления...

</Е1ЕЬ03ЕТ>

Да, группа создается с помощью парного тега <fieldset>, внутри которого помещается HTML-код всех входящих в группу элементов управления. Текст метки помещается внутри особого парного тега <legend>, находящего­ся внутри тега <FiELDSET>. В зависимости от места, где находится тег <legend>, метка будет помещена вверху или внизу группы.

Элементы управления, помещенные в группу, должны быть окружены тонким прямоугольником. Но Dreamweaver не отображает этот прямоугольник. Чтобы увидеть его, откройте страницу в Web-обозревателе.