WEB - дизайн / Лабораторні роботи / Формы в DW

Работа с формами в Dreamweaver. Создание формы.

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

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

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

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

Рис. 16.2. Пустая форма на Web-странице

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

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

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

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

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

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

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

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

Кодировка данных формы задается в комбинированом списке Enctype. В этом списке есть два пункта: application/x-www-form-urlencoded и multipart/form-data. Если вы собираетесь использовать другую кодировку, например, text/plain, можете ввести ее название прямо в этот список.

Примечание Форма создается с помощью парного тега <FORM>… </FORM>, внутри которого помещается все содержимое формы, т. е. элементы управления. Атрибут ACTION задает адрес серверной программы, ENCTYPE – кодировку, а METHOD – метод отправки данных.

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

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

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

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

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

Поле ввода

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

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

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

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

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

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

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

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

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

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

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

• Password – поле ввода пароля.

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

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

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

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

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

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

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

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

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

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

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

Таблица 16.1. Выбор пункта раскрывающегося списка Wrap.

Как должны отображаться данные	Как данные должны получаться серверной программой	Пункт списка
Неизменными	Неизменными	Off
Измененными (с "мягкими" переносами)	Неизменными	Virtual
Измененными (с "мягкими" переносами)	Измененными (с "жесткими" переносами строк)	Physical

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

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

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

Примечание Обычное поле ввода создается посредством одинарного тега <INPUT TYPE= "text">. (Обратите внимание на значение атрибута TYPE.) Поле ввода пароля создается с помощью одинарного тега <INPUT TYPE="password">, область редактирования – с помощью парного тега <TEXTAREA>…</TEXTAREA>, внутри которого помещается содержимое области редактирования. Значение, введенное в поле ввода или область редактирования, преобразуется к виду <имя поля ввода>=<3начение> и отправляется в таком виде. Имя элемента управления задается атрибутом NAME тегов <INPUT> и <TEXTAREA>.

Кнопка

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

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

Рис. 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).

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