Вставка в форму текстового поля

Первым слева на вкладке 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 (Вставить • Форма • Файловое поле).

3. Вопросы для закрепления.

6) Что такое форма и ее назначние?

7) Какие элементы формы вы знаете и их назначение?

8) Свойства элементов формы

4. Домашние задание: Подготовить форму регистрации участника на сайте.

Лекция 16