Последним базовым элементом дизайна веб-страниц являются формы (или вебформы). Фактически формы играют не столько роль украшения веб-страницы, сколько серьезного посредника для обратной связи между веб-сайтом и посетителем. Формы содержат множество самых различных элементов, которые помогут даже самому изощренному дизайнеру. Здесь имеются разнообразные кнопки, переключатели, поля ввода, раскрывающиеся списки и т. д. — в общем, все элементы интерфейса, к которому все уже давно привыкли (их можно встретить в различных диалоговых окнах практически всех приложений Windows). Однако все это только внешние украшательства. Расположив на своей веб-странице эти самые кнопки переключатели или поля, вы только создадите их образ (изображение). Но чтобы заставить их работать, придется написать так называемую серверную программу. Именно она и подскажет, что делать при нажатии на ту или иную кнопку после ввода информации в текстовое поле или при выборе определенного пункта меню, раскрывающегося списка. И здесь вам может существенно помочь Dreamweaver MX 2004. Вставляя на веб-страницу форму или отдельный ее элемент, Dreamweaver MX 2004 уже делает заготовку кода соответствующей серверной программы. О том, как создавать сами серверные программы, мы поговорим несколько позже. А пока — собственно о самих формах. Чаще всего формы на веб-страницах используются для создания обратной связи с посетителем. Наиболее популярными являются анкетные формы. В этом случае посетителю сайта предлагается ответить на некоторые вопросы. При нажатии на кнопку (например, «Отправить») все введенные им данные отправляются по электронной почте на ваш адрес. Затем эти данные можно использовать, скажем, для статистических подсчетов. Кроме того, очень часто встречаются так называемые формы голосования. В этом случае достаточно установить переключатель в одну из позиций, соответствующих предлагаемым в ответ на вопрос предложениям. Такие формы наиболее популярны на новостных или музыкальных (хит-парады) сайтах. Создаются также формы, с помощью которых, не покидая веб-страницы, можно отправить сообщение хозяину сайта по электронной почте. Область применения форм практическине знает пределов, хватило бы фантазии!
Создание новой формы
Dreamweaver MX 2004 предлагает на выбор несколько способов создания формы (или ее элементов). Какой из них вам больше понравится, такой и используйте. Наверное, самый простой способ — использовать вкладку Forms (Формы) панели инструментов Insert. Все элементы на этой панели разделены на шесть логических групп
Вкладка Forms панели инструментов Insert
В первой группе панели Forms расположен всего один элемент Form (Форма). Щелчок по нему левой кнопкой мыши приводит к созданию новой формы. Первоначально форма является пустой (не содержит никаких элементов). Также новую форму можно создать, выполнив команду меню Insert • Form • Form (Вставить • Форма • Форма). Кстати, в этом же меню расположены и другие команды, позволяющие вставлять различные элементы формы. При создании новой формы на веб-страницу будет помещена узкая полоска с красной пунктирной границей. Собственно, это и есть наша новая пустая форма Одновременно с этим в HTML-код веб-страницы будет вставлен парный тег <form> с заготовкой некоторых параметров. В зависимости от поставленной цели новую форму можно разместить и внутри других, уже имеющихся, элементов веб-страницы, например внутри таблицы. Точно так же внутри формы можно разместить различные элементы веб-страницы, даже те, которые не являются элементами формы (таблицы, картинки, текст и т. д.). Единственное ограничение — в форму нельзя вставить другую форму. Новая форма сразу же станет активной (то есть готовой к дальнейшему редактированию). В связи с этим изменится и вид панели Properties. На ней можно настроить свойства самой формы. В поле ввода Form name (Имя формы) задается имя данной формы. По умолчанию Dreamweaver MX 2004 вставит туда стандартное имя form 1. Имя можно таким и оставить. Для изменения имени формы щелкните правой кнопкой мыши точно по пунктирной границе формы. Это приведет к открытию контекстного меню формы. Здесь следует выбрать первый пункт Name. Откроется небольшое диалоговое окно Change Attribute (Изменение атрибута). Оно содержит единственное поле ввода Name, в которое и требуется ввести новое имя формы
Панель Properties новой формы
Вернемся к панели Properties нашей новой формы. В верхней строке центральной части панели располагается поле ввода Action (Действие). Здесь требуется указать URL-адрес серверной программы, которая будет обрабатывать данные, введенные в эту форму. В раскрывающемся списке Target выбираем место, куда будет загружаться вебстраница, созданная серверной программой на основе данных, введенных в форму. В раскрывающемся списке Method (Метод) выбираем метод пересылки введенных в форму данных. Здесь есть три возможных варианта: • Default — метод не определен. В этом случае работает метод, устанавливаемый по умолчанию (Get); • Get — установлен по умолчанию. В этом случае перед пересылаемыми данными ставится знак вопроса. Затем данные пересылаются на сервер, на котором находится программа обработки этих данных. Учтите, что все данные, пересылаемые таким методом, должны быть введены только латинскими буквами. А максимальный объем этих данных ограничивается максимальной длиной URL-адреса (8192 символа); • Post — в этом случае данные, введенные в форму, пересылаются в теле запроса, который происходит по указанному URL-адресу обработчика. В отличие от второго метода, при этом практически нет ограничений по объему или типу символов данных. В раскрывающемся списке Enctype выбираем метод кодирования данных, полученных формой. Здесь всего два варианта: • Applicetion/x-www-form-urlencoded — используется для кодировки данных при методе пересылки Post; • Multipart/form-date — используется в случаях, если в форме имеется поле ввода File Field (Поле ввода), в которое посетитель может ввести имя файла. При особой необходимости здесь можно указать и свой собственный метод. Но это уже не для начинающих. После создания самой формы можно приступать к ее наполнению, так как пустая форма не имеет смысла.
Элементы формы
Как уже упоминалось, внутри формы можно размещать самые разные элементы. Единственное ограничение — внутри одной формы нельзя поместить другую форму. Однако без особого труда в форму можно поместить типичные элементы веб-страницы, а также специальные элементы управления. Вставка в форму типичных элементов веб-страницы Для того чтобы вставить в форму типичные элементы веб-страницы, не требуется придумывать что-либо новое. Устанавливаем текстовый курсор в нужное место формы. А затем выполняем привычные нам действия, порядок которых диктуется тем, какой элемент мы желаем вставить в форму. Действуйте так, как будто вы вставляете этот элемент не в форму, а на обычную веб-страницу. Так, если вы хотите вставить в форму обычный текст, то просто наберите его на клавиатуре. Для вставки графического изображения придется выполнить команду меню Insert • Image. Пользуясь стандартными инструментами, можно изменять свойства вставляемых элементов. Однако учтите, что размеры формы будут меняться в зависимости от размеров вставляемых в нее элементов. Если со вставкой типичных элементов веб-страницы все ясно, то перейдем к подробному рассмотрению вставки в форму различных элементов формы. Таких элементов всего тринадцать. Ничего сложного во вставке этих элементов нет. Их можно вставлять либо прямо в форму, либо помещать внутрь уже вставленных в форму типичных элементов веб-страницы (например, в таблицы). Все элементы формы расположены на вкладке Forms панели инструментов. Они разделены на пять логических групп. По какому принципу их рассортировали, догадаться не трудно. Для вставки в форму необходимого элемента достаточно просто щелкнуть по его значку на вкладке левой кнопкой мыши или перетащить его изображение со вкладки в нужное место формы. Кроме того, можно вставить нужный элемент, выполнив соответствующую команду меню Insert • Form. Для удаления ненужного элемента формы просто выделяем его и нажимаем клавишу Del. Таким же способом можно удалить и ненужную форму. Если вы попытаетесь вставить элемент формы вне границ самой формы, то Dreamweaver MX 2004 это сразу заметит. Откроется окно предупреждения, в котором Dreamweaver MX 2004 спросит: Add form tag? (Добавить тег формы?). Есть два варианта ответа. Если вы нажмете кнопку Yes (Да), то перед тем как вставить элемент, Dreamweaver MX 2004 создаст новую форму и уже в нее поместит сам элемент. В противном случае элемент будет помещен непосредственно на веб-страницу. Теперь, когда общие правила работы с элементами формы ясны, рассмотрим все эти элементы несколько подробнее.
Вставка в форму текстового поля
Первым слева на вкладке Forms панели инструментов располагается группа элементов полей. В эту группу входит три таких элемента. Первый из них — TextField (Текстовое поле). Для вставки в форму текстового поля можно использовать и команду меню Insert • Form • Text Field (Вставить • Форма • Текстовое поле). Как известно, обычное поле ввода служит для ввода в него какого-либо текста. После вставки в форму этого элемента появится небольшой горизонтальный прямоугольник. Он сразу будет выделен пунктирной линией. В панель Properties этого элемента можно сразу внести изменения параметров. В поле ввода TextField (Текстовое поле) вводится имя данного текстового поля. Поле ввода Char width (Ширина по символам) служит для ввода значения ширины поля ввода, то есть определяет, сколько введенных символов можно будет увидеть в этом поле. Не следует задавать слишком большое значение. Для этого существуют другие элементы формы. Поле ввода Max Chars (Максимальное число символов) задает максимальное число символов, которое можно ввести в данное поле ввода. В случае если значение Max Chars будет больше, чем значение Char width, то содержимое поля ввода можно будет прокручивать по горизонтали. Группа переключателей Туре, расположенная в верхней строке панели Properties, служит для выбора типа поля ввода. Возможно одно из трех положений: • Single line (Одна линия) — создается поле ввода в одну строку; • Multi line (Многострочное поле ввода) — позволяет вводить целый абзац; • Password (Поле ввода пароля) — все вводимые символы отображаются в виде «звездочек» (*). Если выбрать второе положение (Multi line), то поле ввода сразу увеличится в размерах и приобретет полосы прокрутки (пока недоступные). Вместе с тем на панели Properties несколько изменятся поля ввода параметров. Так, вместо поля ввода Max Chars появится поле ввода Num Lines, задающее число строк в создаваемом многострочном поле ввода. Станет доступным раскрывающийся список Wrap, значения которого определяют способ переноса слов в вводимом тексте. В нем четыре варианта: • Off — отключает перенос строк; • Virtual — перенос строк будет выполняться путем вставки так называемых «мягких переводов строк». При отправке для обработки на сервер они удаляются; • Physical — заменяет все «мягкие переводы строк» на «жесткие» перед отправкой на сервер; • Default — соответствует значению по умолчанию (Off). Увеличится и размер поля ввода Init val. Кстати, здесь вводится начальное значение, которое будет отображаться в поле ввода. Аналогичного результата можно добиться и при выборе на вкладке Forms панели инструментов в той же группе элемента Textarea (Текстовая область). Если переключатель Туре установлен в положение Password (Пароль), то введенные в поле ввода Init val символы в самом поле ввода в форме будут отображаться в виде точек. В этой же группе элементов формы, чуть правее, расположен элемент HiddenField (Скрытое поле). Он не отображается на самой веб-странице. В поле ввода Value панели Properties данного элемента вводится начальное значение этого поля, которое не может быть изменено посетителем веб-страницы. Свойства этого поля ввода очень удобно использовать при обработке разного рода анкет или заявок виртуального магазина.
Переключатели и флажки
Следующая группа элементов вкладки Forms панели инструментов объединяет переключатели и флажки. В этой группе три элемента — Checkbox (Флажок), Radio Button (Переключатель) и Radio Group (Группа переключателей). Элемент Checkbox устанавливает в форме флажок. Этот элемент используется в основном в анкетных формах. Флажок может быть установлен или нет по желанию посетителя веб-страницы. В отличие от других элементов этой группы, флажки могут работать и по одиночке, независимо друг от друга. Для установки элемента Checkbox можно выполнить команду меню Insert • Form • Check Box (Вставить • Форма • Флажок). В том и другом случае в форму вставляется маленький квадратик. Если флажок на веб-странице установлен, в этом маленьком квадратике появляется «галочка». Панель Properties свойств элемента Check Box совсем проста. В поле ввода CheckBox name (Имя флажка) вводится имя элемента — впрочем, его можно оставить и без изменений. Далее следует поле ввода Checked value (Значение флажка), предназначенное для ввода значения элемента, которое он принимает при установке данного флажка посетителем веб-страницы. Именно это значение и будет обрабатываться серверной программой. Переключатель Initial state (Начальное положение) позволяет выбрать начальное состояние данного флажка: положение Checked — установлен, положение Unchecked — не установлен. Элементы Radio Button в отличие от флажков обычно используют группами. Ведь для переключателя должно быть как минимум два возможных положения. Для вставки в форму переключателя надо выбрать второй элемент Radio Button первой группы на вкладке Forms панели инструментов либо выполнить команду меню Insert • Form • Radio Button (Вставить • Форма • Переключатель). Допустим, мы решили на веб-странице разместить небольшой опрос для выяснения возрастной статистики посетителей сайта. Для этого создаем новую форму. Устанавливаем текстовый курсор в первой строке формы и вводим текст заголовка анкеты. Затем устанавливаем текстовый курсор на новую строчку. Выполняем команду меню Insert • Form • Radio Button и вставляем в форму первый переключатель. Чуть правее от него вводим текст данного положения переключателя. Повторяем эту последовательность действий еще несколько раз. Вот и все, форма готова. Останется только подключить к ней соответствующую серверную программу, которая и обработает принятые формой данные. Внешний вид панели Properties для элемента Radio Button мало чем отличается от описанной раньше аналогичной панели для элемента CheckBox. Здесь также имеется переключатель Initial state, определяющий, будет ли флажок установлен по умолчанию. Последний элемент в группе, Radio Group, служит для создания сразу целой группы переключателей, каждый из которых аналогичен описанному выше. При выполнении команды меню Insert • Form • Radio Group (Вставить • Форма • Группа переключателей) или при нажатии на пиктограмму Radio Group (Группа переключателей) на вкладке Forms откроется диалоговое окно Radio Group (Группа переключателей), в котором задаются свойства создаваемой группы переключателей. Поле ввода Name служит для задания имени идентификатора элемента. Dreamweaver MX 2004 самостоятельно вписывает сюда стандартное имя группы переключателей. Главное, не перепутать его с именем отдельного положения переключателя. Большую часть окна Radio Group занимает поле-таблица Radio buttons (Кнопки переключателя). Именно здесь в колонке Label указывается название, соответствующее очередному положению переключателя, а в колонке Value — значение, которое будет направлено для обработки серверной программе. По умолчанию в этой таблице всего два положения переключателя с абсолютно одинаковыми свойствами. Но можно добавить еще несколько положений в эту группу. Для этого служит кнопка со знаком +, находящаяся над таблицей в левом углу. Рядом с ней располагается кнопка со знаком -, которая, наоборот, удаляет лишние (ошибочные) положения переключателя. Кнопки со стрелками служат для изменения очередности следования положений переключателей в группе. В нижней части диалогового окна Radio Group расположен переключатель Lay out using (Использовать расположение), определяющий оформление группы переключателей в форме. Здесь всего два варианта: • Line breaks (<br> tags) — в этом случае переход на другую строку для размещения следующего положения переключателя осуществляется путем вставки стандартного тега <BR> (перевод строки); • Table — оформление группы переключателей выполняется на основе таблицы. В этом случае каждое положение переключателя занимает свою собственную ячейку таблицы. В верхней части формы располагается группа переключателей, оформленная с использованием тега <BR>.
Списки и меню
Следующая группа элементов формы содержит два элемента общей группы — раскрывающиеся списки. List/Menu (Список/Меню) — первый элемент этой группы. Создается командой меню Insert • Form • List/Menu (Вставить • Форма • Список/Меню). В результате в форму вставляется незаполненный раскрывающийся список (меню) или просто список. Все настройки выполняются, естественно, на панели Properties данного элемента формы. В поле ввода List/Menu указывается индивидуальное имя элемента. Переключатель Туре как раз и позволяет выбрать вид нашего элемента. В нем два варианта: Menu (Меню) и List (Список). На словах довольно трудно объяснить, чем они отличаются друг от друга. Поэтому, забегая немного вперед, приведем пример, где в одной форме рядом расположены и меню и список. Все остальные свойства у этих элементов одинаковые, различаются только значения параметра Туре. Сверху, как вы уже поняли, размещен пример, соответствующий типу Menu. Видным остается только один его пункт. Какой именно это будет пункт (возможна и пустая строка), указываем на панели Properties в списке Initially selected (Выделенный элемент). Здесь надо просто щелкнуть левой кнопкой мыши по соответствующему пункту. На веб-странице, загруженной в браузер, после щелчка на значке со стрелкой раскроется весь список (или меню, как его здесь называют). Вновь выбранный пункт будет отображаться и при закрытии этого меню. Снизу расположен типичный вариант списка List В случае когда на панели Properties переключатель Туре установлен в положение List, на самой панели станут доступны еще два параметра. В поле ввода Height указывается число строк списка, которые будут видны одновременно. В поле ввода Height было установлено значение 4, в то время как всего в этом списке было шесть пунктов. Флажок Selection: Allow multiple (Выделение: разрешить многократное) дает возможность выбирать в списке сразу несколько (можно и все) пунктов. Однако при таком выборе придется удерживать нажатой клавишу Ctrl. Итак, мы подробно рассмотрели все нюансы настройки списков или меню. Однако о том, как эти списки наполнить, мы еще не говорили. Для этих целей на панели Properties имеется кнопка List Values (Значение списка). Она открывает одноименное диалоговое окно List Values. Большую часть этого окна занимает таблица, состоящая из двух колонок. В левой колонке Item Label содержатся названия пунктов меню. В правой — Value — значения, которые пересылаются серверной программе. Следующий элемент в этой группе элементов вкладки Forms называется Jump Menu («Выскакивающее» меню). В отличие от описанных ранее списков или меню, в данном случае создается раскрывающееся меню (раскрывающийся список), состоящее из гиперссылок. Каждая такая гиперссылка создает переход на другую веб-страницу. При выполнении команды меню Insert • Form • Jump Menu (Вставить • Форма • «Выскакивающее» меню) откроется диалоговое окно Insert Jump Menu (Вставка «выскакивающего» меню). Основная часть данного диалогового окна разделена на две части. В верхней части, в поле ввода Menu items (Пункты меню), отображаются все названия пунктов создаваемого меню так, как они будут отображаться на веб-странице. Органы управления (кнопки, расположенные над этим полем ввода) вам уже знакомы. В поле ввода Text, которое располагается чуть ниже поля ввода Menu items, вводим название очередного пункта меню. После нажатия клавиши Enter название из поля ввода Text переместится в верхний список. Последнее поле ввода в верхней части этого окна — When selected, go to URL (Если выбран, перейти по URL-адресу). Оно предназначено для ввода URL-адреса гиперссылки, по которому будет осуществлен переход при выборе соответствующего пункта меню. В раскрывающемся списке Open URLs in (Открыть URL-адрес в) указывается место, в котором будет загружаться веб-страница, вызываемая по гиперссылке. По умолчанию в этом списке имеется только одно значение — Main window (Главное окно). В этом случае загрузка новой веб-страницы будет осуществляться в основном окне браузера. Если же сайт основан на многофреймовой структуре, то в этом раскрывающемся списке будут перечислены названия всех фреймов сайта. В поле ввода Menu name (Имя меню) требуется ввести оригинальное названиеидентификатор создаваемого меню. И наконец, в нижней части описываемого диалогового окна располагается группа флажков Options. В ней всего два флажка. При установке флажка Insert go button after menu (Вставить кнопку GO после меню) Dreamweaver MX 2004 правее меню разместит кнопку GO (Перейти). В этом случае переход по гиперссылке будет осуществлен только после нажатия этой кнопки. Если флажка нет, то нет и кнопки на веб-странице. В этом случае переход по гиперссылке меню будет выполнен сразу после выбора нужного пункта меню. Установка флажка Select first item after URL change (Выбран первый пункт) автоматически делает первую строку в меню гиперссылок выбранной при переходе на веб-страницу, содержащую такое меню. В заключение следует заметить, что панель Properties данного элемента ничем не отличается от аналогичной панели других элементов типа списков или меню. Поэтому для того, чтобы изменить состав меню, на панели Properties надо будет нажать кнопку List Values (Список значений). При этом откроется одноименное окно, в котором и следует изменить список меню. Как это делается, вы уже знаете.
Кнопки
Переходим к следующей группе элементов формы вкладки Forms панели инструментов. Она включает всего три элемента. Все элементы, входящие в эту группу, можно объединить под общим понятием — кнопка. Кнопка является одним из наиболее популярных элементов формы. Остановимся на элементах этой группы подробнее. ImageField (Графическое поле). Несмотря на свое название, создает не что иное, как графическую кнопку. Иными словами, вместо обычной серой кнопки с надписью в форму будет вставлено графическое изображение. После выполнения команды меню Insert • Form • ImageField (Вставить • Форма • Графическое поле) откроется диалоговое окно Select Image Source, в котором предлагается выбрать имя файла, содержащего графическое изображение. После этого на веб-страницу будет вставлена соответствующая форма с выбранной картинкой.
В поле ввода ImageField (Графическое поле) указываем оригинальное имя-идентификатор создаваемой кнопки. В полях ввода W и Н указываются соответственно ширина и высота графической кнопки. В поле ввода Src задаем имя файла, содержащего графическое изображение, используемое в качестве кнопки в данной форме. В поле ввода Alt указываем так называемый альтернативный текст, который отобразится вместо графического изображения, если последнее не загрузится на веб-страницу. Раскрывающийся список Align позволяет выбрать один из вариантов выравнивания графического изображения относительно окружающего его содержимого веб-страницы. Кнопка Edit image (Редактировать изображение) загружает программу-редактор, позволяющую сразу же подправить графическое изображение, используемое в качестве кнопки. Следующий элемент этой группы — File Field (Файловое поле) — создает элемент формы, служащий для ввода (или выбора) имени файла. А файл с указанным именем будет отправлен от посетителя сайта на сервер. Этот элемент формы иногда еще называют селектором файлов или полем ввода файлов. И то и другое в принципе отвечает сути элемента. Однако если в форме вы используете такой элемент, то необходимо выбрать метод кодирования multipart/form-data, а метод пересылки — Post. Сам элемент состоит из двух частей — собственно поля ввода и кнопки Browse. При нажатии на эту кнопку открывается стандартное диалоговое окно Windows Select File. Для вставки его в форму также можно использовать команду меню Insert • Form • File Field (Вставить • Форма • Файловое поле).
Вопросы для закрепления
- Что такое форма и ее назначние?
- Какие элементы формы вы знаете и их назначение?
- Свойства элементов формы
Домашние задание:
- Подготовить форму регистрации участника на сайте.
электронное учебное пособие 