Текст книги "Интернет. Быстрый старт"

Однострочные поля текстового ввода бывают двух видов. Первый вариант, обычную, стандартную реализацию строки ввода мы уже рассмотрели. Но может быть использовано и поле, применяемое для ввода информации, не предназначенной для всеобщего обозрения. В этом случае, при вводе текста вместо вводимых символов будут отображаться звездочки. Для установки подобного варианта поля текстового ввода необходимо в выбрать диалоговом окне в группе Password Field (Поле скрытой информации) зависимый переключатель Yes. После нажатия кнопки ОК в поле на странице Normal (Режим разметки) сразу будут отображены звездочки, заменяющие предустановленное значение. А для реализации при помощи HTML в параметре type тэга <input> указывается значение "password".

Для поля текстового ввода могут быть установлены правила соответствия значения. То есть всегда можно потребовать от пользователя, чтобы вводимое значение соответствовало вашим ограничениям. Например, если вы хотите получить возраст, то вы можете принять только численное значение в определенном интервале (например, от пяти до восьмидесяти лет). Для установки подобных ограничений используется кнопка Validate (Проверка) или команда Form Field validation (Проверка данных поля ввода) контекстного меню объекта. Общий вид этого окна показан на рис. 8.31.

Рис. 8.31. Диалоговое окно Text Box Validation

Самым главным органом управления является выпадающий список Data type (Тип данных), в котором задается тип получаемого значения. Если вы не собираетесь устанавливать какие-либо ограничения на тип получаемых данных, то выберите пункт No constraints (Без ограничений). Для текстового типа зарезервировано значение Text (Текст). Для обычного числового типа – Number (Числовой), а если необходимо получить целочисленные данные, используется пункт Integer (Целочисленный). В зависимости от того, какой тип получаемых данных установлен, активизируется тот или иной блок органов управления диалогового окна. Так, для текстовых данных предназначен блок Text format (Формат текста) с группой флажков, каждый из которых разрешает или запрещает ввод определенных символов. Переключатель Letters (Буквы) отвечает за ввод букв, переключатель Digits (Цифры) заведует цифрами. Если в состав вводимых данных могут входить пробелы, необходимо установить флажок Whitespace (Пробелы). Если помимо вышеперечисленных символов могут вводиться и другие, необходимо установить флажок Other (Другие) и в соответствующем поле ввода указать допустимые символы.

Для числовых данных зарезервирован блок Numeric format (Числовой формат). Причем формат целочисленных значений регулируется всего одной группой переключателей Grouping (Группирование). Этот орган управления позволяет регулировать порядок разбиения числа на триады. В том случае, если подобное разбиение не требуется, выбирается переключатель None (Нет). Если планируется разделять триады точками или запятыми, используются переключатели Period (Период) и Comma (Запятая), соответственно. Если в проектируемое поле необходимо будет ввести численные значения, которые могут представлять собой десятичные дроби (выбран тип Number), вам следует указать символ, который будет применяться в качестве десятичного разделителя. Для этого используется группа переключателей с названием Decimal (Десятичный). В качестве десятичного разделителя может быть использована либо точка, либо запятая. За выбор этих символов отвечают переключатели Period и Comma, соответственно. Естественно, не стоит в качестве разделителя триад и десятичного разделителя использовать один и тот же символ. Это не слишком хорошо сказывается на удобочитаемости чисел.

В нашей форме, вполне вероятно, не все поля ввода будут равносильны. Одна информация будет более важна ("Укажите, пожалуйста, Ваше полное имя и номер Вашей кредитной карты"), а другая – менее ("Как Вы назвали свою собаку?"). Поэтому некоторые поля могут быть объявлены обязательными для ввода. Более того, длина вводимого значения тоже может регламентироваться. Для этого используются органы управления диалогового окна, сосредоточенные в блоке Data length (Длина данных). В том случае, если создаваемое поле ввода является обязательным для заполнения, устанавливается флажок Required (Необходимые). Минимальную и максимальную длину вводимого значения в символах можно (и нужно) указать в полях Min length (Минимальная длина) и Max length (Максимальная длина), соответственно.

Иногда посетитель сайта пытается нажать на кнопку отсылки информации, не вводя обязательные данные. В этом случае бывает полезно отобразить напоминание. Для каждого обязательного поля ввода текст напоминания одинаков и задан заранее. Меняется только наименование поля. Это наименование вставляется в текст предупреждения. Указать его можно в строке Display name (Отображать наименование).

Однако самую главную возможность данного диалогового окна мы еще не рассмотрели. Как мы уже говорили, на вводимые данные накладываются определенные ограничения. Так вот, для указания отношений сравнимости (больше, меньше, равно, не равно и т. д.) используется блок Data value (Значение данных). Всего может быть наложено два ограничения, связанных логической операцией И. Сама процедура установки ограничений достаточно проста. Для первого ограничения устанавливается флажок Field must be (Поле должно быть…), затем в соответствующем списке выбирается необходимое условие, а в поле Value (Значение) выставляется сравнительное значение. Для второго ограничения устанавливается флажок And must be (И должно быть…), а потом операция повторяется. Рассмотрим на примере.

Вам необходимо получить сведения о возрасте посетителя сайта. Для отбраковки заведомо неверных ответов вы устанавливаете возможный возраст от десяти до восьмидесяти лет. То есть ваше получаемое значение должно быть больше или равно, чем десять, и меньше или равно, чем восемьдесят. В блоке Data Value (Значение данных) вы устанавливаете оба флажка. Затем в первой строке вы выбираете операцию сравнения Greater than or equal to (Больше или равно), а в поле Value (Значение) выставляете десятку. Во второй строке вы выбираете операцию Less than or equal to (Меньше или равно) и устанавливаете сравнительное значение равным восьмидесяти. Как видите, все достаточно просто.

Итак, с обычным однострочным полем текстового ввода мы разобрались. Переходим к следующему органу ввода данных. Им является блок для ввода нескольких строк текста, снабженный полосами прокрутки. Для сто вставки применяется команда меню Insert/Form/Scrolling Text Box (Вставка/Форма/Прокручиваемый текстовый блок). По умолчанию вставляется область из двух строк по двадцать символов. Но ее размеры вместе со всеми остальными немногочисленными свойствами можно изменить при помощи соответствующего диалогового окна. Если после установки всех необходимых свойств вы заглянете на страницу HTML, то обнаружите следующую конструкцию:

<textarea rows="3" name="S1" cols="40" tabindex="0">Текст по умолчанию</textarea>

Как видите, многострочное поле ввода реализуется не при помощи тэга <input> Это один из немногих органов управления форм, для которого зарезервирован собственный тэг. Применяется для этого тэг <textareax Но многие его параметры вам уже знакомы. В параметре name, как обычно, задается уникальное идентифицирующее имя органа управления. Параметры rows и cols предназначены для указания количества отображаемых строк и столбцов, соответственно. Естественно, это не означает, что вводимый текст будет ограничиваться подобным же образом. У поля есть полосы прокрутки, которые можно использоваться по мере необходимости. Параметр tabindex служит для указания порядкового номера органа управления формы, который применяется при навигации по форме. Текст, отображаемый в поле по умолчанию, располагается между объявляющим тэгом <textarea> и его закрывающим близнецом </textarea>.

Следующий орган управления, предназначенный для использования в формах, вставляется при помощи команды меню Insert/Form/Check Box (Вставка/Форма/Флажок). При этом в форме появляется независимый переключатель. Причем, без текста. Текст, привязанный к этому переключателю, приходится вводить самостоятельно. Свойств у независимых переключателей не так уж и много. Как вам уже известно, у каждого органа управления есть свое наименование и порядковый номер, используемый при навигации по форме при помощи клавиши табуляции. У независимого переключателя также можно указать стартовое состояние, т. е. будет он включен или выключен при первом отображении формы, пока пользователь еще не потрудился над ней. Это свойство, как и все остальные, указывается в диалоговом окне установки свойств переключателя Check Box Properties (Параметры флажка). Для установки начального состояния независимого переключателя используется группа переключателей Initial state (Начальное состояние). Естественно, кнопка Checked (Включено) заставляет отображаться переключатель. Переключатель Not checked (Выключено) оставляет его в обычном, невзведенном состоянии. Поле Value (Значение) предназначено для настройки взаимодействия переключателя с программой, обрабатывающей данные. Если поля передавали обрабатывающей программе на сервере введенный в них текст, то независимый переключатель не имеет такой возможности. Вместо этого передается значение, указанное в поле Value (Значение). То есть, если посетитель сайта при работе с формой отметил этот переключатель, то он отсылает соответствующее текстовое значение. Если переключатель не был использован, то ничего и не пересылается. В том случае, если вы сами создаете обрабатывающее приложение, содержимое этого поля необходимо привести в соответствие с правилами приема данных вашей программой. Но если планируется использовать стандартные решения FrontPage 2000, то настоятельно рекомендуется не изменять значение поля Value (Значение). Оно будет применяться в обрабатывающей программе и в активных элементах, использующих информацию из форм, таких как Confirmation Field (Поле подтверждения).

Итак, если вы явно установите свойства независимого переключателя и заглянете на страницу HTML, то вы встретите там следующий код:

<input type="checkbox" name="C1" value="ON" checked tabindex="1">

Здесь видно, что, как и подавляющее число всех органов управления, независимый переключатель реализуется в HTML при помощи тэга <input>. Значение параметра type, полностью задающее тип создаваемого элемента получения данных, равно «checkbox». Параметры name и tabindex вам давно знакомы. Параметр checked без приписанного ему значения используется, если при первом отображении переключателя он должен быть помечен как включенный. Напомню, что по умолчанию все независимые переключатели отображаются со сброшенными флажками. И наконец, параметр value в качестве своего значения содержит текстовую строку, которая будет передана обрабатывающей программе в том случае, если независимый переключатель будет находиться во включенном положении на момент отсылки данных на сервер.

Логичным теперь будет рассмотрение групп переключателей. Эта возможность также предусмотрена FrontPage 2000. Для вставки переключателя используется команда меню Insert/Form/Radio Button (Вставка/Форма/Переключатель). Эта команда, как и предыдущая, создает только сам орган управления, а текст, ассоциированный с ним, необходимо вводить вручную. Так как создавать один переключатель бессмысленно, разместим на форме два переключателя, а затем посмотрим, как они реализованы в HTML-коде страницы. На странице HTML мы увидим следующий блок кода:

<р><input type="radio" value="V1" name="Rl" checked>Переключатель 1</р>

<p><input type="radio" name="R1" value="V2">Переключатель 2</p>

Здесь все конструкции, реализующие отдельные переключатели, помещены между тэгами объявления абзаца. Как видите, значение параметра type, задающего конкретный тип создаваемого органа управления формы, является текстовой строкой «radio». Но если вы внимательно присмотритесь к параметрам name в обоих тэгах, то обнаружите, что значения в них совпадают. Дело в том, что отдельный переключатель не может считаться самостоятельным органом управления. Поэтому в параметре name задается имя группы переключателей. И если у нескольких переключателей, размещенных на форме, причем совсем необязательно рядом друг с другом, значения этого параметра совпадают, то они и вести себя будут соответственно, т. е. при активизации одной кнопки выбранная перед этим кнопка утратит свой статус и выделение с нее будет снято. Параметр value в переключателях служит той же цели, что и одноименный параметр в HTML-реализации независимых переключателей. То есть при отсылке данных принимающей программе на сервер рядом с именем группы будет указана строка, являющаяся значением параметра value выбранного удаленным пользователем переключателя. При первом отображении формы в группе переключателей она может быть выбрана заранее. В таком случае в ее тэг добавляется параметр checked. Он, естественно, не нуждается в присвоении какого-либо значения. Однако наличие одного активизированного переключателя в группе не является обязательным. Поэтому вполне возможна такая ситуация, когда ни один тэг переключателей не имеет этого параметра.

Редактирование свойств каждого отдельно взятого переключателя производится при помощи диалогового окна Radio Button Properties (Параметры переключателя). Как вы, наверное, помните, подобные диалоговые окна для каждого органа управления, размещаемого в формах, активизируются при помощи команды контекстного меню Form Field Properties (Параметры поля группы). В этом диалоговом окне в поле Group name (Имя группы) вводится имя группы, к которой принадлежит данный переключатель. В поле Value (Значение) вносится идентифицирующее имя переключателя, а группа Initial state (Начальное состояние) позволяет указать начальное состояние переключателя. Конечно, как только в этой группе для какого-либо переключателя вы укажете начальное состояние Selected (Выбрано), всем остальным переключателям этой группы будет приписано начальное состояние Not selected (Не выбрано).

И последний орган ввода информации, используемый в формах, – выпадающий список. Вставляется при помощи команды Insert/Form/Drop-Down Menu (Вставка/Форма/Выпадающий список). Изначально создается маленький и пустой список. Значения для выбора и все остальные свойства списка вы должны задать в диалоговом окне Drop-Down Menu Properties (Параметры выпадающего списка), показанном на рис. 8.32.

Рис. 8.32. Диалоговое окно Drop-Down Menu Properties

Самой главной частью этого диалогового окна, очевидно, является основной список, в котором размещаются все элементы создаваемого нами выпадающего списка. Добавление нового элемента производится нажатием кнопки Add (Добавить). Эта кнопка визуализирует дополнительное диалоговое окно, в котором осуществляется указание всех свойств нового элемента. В строке Choice (Выбор) вводится текст элемента. По умолчанию передаваемое серверу значение будет совпадать с этим текстом. Но для русскоязычных списков по вполне понятным причинам это несколько неудобно. Поэтому следует установить флажок Specify value (Установить значение) и в соответствующее поле ввода ввести необходимое текстовое значение. Как вы видите из рис. 8.32, для элемента списка «Первый пункт» соответствующее значение представляет собой текстовую строку first. Как и все подобные значения, эти строки будут использоваться, помимо принимающих приложений, еще и в подтверждающих активных элементах, таких как Confirmation Field (Поле подтверждения). Ну а при помощи группы переключателей Initial state (Начальное состояние) можно установить начальное состояние этого пункта, будет он выбран или нет. Изменение свойств уже существующего пункта списка производится при помощи кнопки Modify (Изменить), а для удаления какого-либо элемента используется кнопка Remove (Удалить). Изменение порядка элементов производится при помощи кнопок Move Up (Переместить вверх) и Move Down (Переместить вниз). Высота списка задается в поле Height (Высота). Правда, если вы укажете высоту списка более одной строки, то он будет больше напоминать прокручиваемый, а не выпадающий список. Но суть его от этого не изменится. В том случае, если этот список спроектирован для множественного выбора, т. е. посетитель сайта может выбрать несколько элементов списка сразу, следует установить переключатель Yes в группе Allow multiple selections (Допустить множественный выбор). После установки всех значений перейдите на страницу HTML и посмотрите, как реализован это список. Вы увидите следующий блок:

<select size="2" name="D1" multiple>

<option value="first">Первый пункт</option>

<option selected value="second">Второй пункт</option>

<option value="third">Третий пункт</option>

</select>

Здесь вы встретите еще один (и последний) орган ввода данных, для которого зарезервирован собственный тэг. Теперь это тэг <seiect>. Между ним и его закрывающим близнецом </seiect> располагаются тэги <option>, реализующие отдельные элементы выпадающего списка. Сначала рассмотрим параметры тэга <seiect>. Высота списка в строках задается при помощи параметра size. Так как в диалоговом окне задания свойств списка вы установили возможность множественного выбора, появляется параметр multiple.

Тэги элементов списка тоже достаточно просты для анализа. Прежде всего, необходимо отметить, что текст этих элементов находится в обрамлении тэгов <option> и </option>. В каждом тэге <option> установлен параметр value, содержащий строку, идентифицирующую данный элемент списка. А если этот элемент выбран по умолчанию, то в тэг добавляется еще и параметр selected.

На этом список органов управления, предназначенных для ввода данных, заканчивается. Мы уже сталкивались с двумя типами кнопок – Reset (Очистить) и Send (Отослать). Теперь нам предстоит рассмотреть процедуру создания обычной кнопки, с не заданной ранее функциональностью. Для ее вставки используется команда меню Insert/Form/Push Button (Вставка/Форма/Кнопка), а для изменения ее свойств – соответствующее диалоговое окно Push Button Properties (Параметры кнопки). В поле Value/Label (Значение) вы можете указать надпись, помещаемую на кнопке, а в группе переключателей Button type (Тип кнопки) выбрать тип создаваемой кнопки. Из предлагаемых трех типов два вы уже знаете. Нас же здесь интересует тип Normal. Эта альтернатива создает кнопку без привязки к какому-либо действию. Рядовыми пользователями подобные кнопки, как правило, не используются, поскольку к ним весьма затруднительно привязать какое-либо действие. FrontPage 2000 в своей справке так и указывает, что при создании подобных кнопок пользователь должен сам написать и присоединить сценарий действий для этой кнопки. Теперь, после создания подобной кнопки, посмотрим, как она реализована в HTML-коде. Для объявления подобных КНОПОК используется тэг <input type="button" value="Кнопка" name="B3">. Единственное различие от HTML-реализации известных нам кнопок – значение параметра type. В данном случае применяется строка «button». В параметре value, как всегда, задается надпись на кнопке.

Для посылки данных из формы на сервер можно использовать не только кнопку типа Submit, но и обычное графическое изображение, которое будет играть роль данной кнопки. В этих целях обычно используют картинку с красивой надписью, которая гласит «Отправить!» или что-нибудь в таком же роде. Для вставки подобного органа управления используется команда меню Insert/Form/Picture (Вставка/Форма/Рисунок). При этом визуализируется обычное окно вставки графического изображения. Если после размещения на форме этой картинки вы заглянете на страницу HTML, то обнаружите там следующий тэг:

<input border="0" src="images/Hlplogo.gif" name="I1" width="97" height="40" type="image">.

Здесь в параметре type указано значение «image». Именно оно характеризует тип вставленного органа управления. Все остальные параметры, кроме параметра name, полностью повторяют параметры тэга, объявляющего обычное графическое изображение.

При работе со страницей, содержащей достаточно обширную форму, можно заметить, что для выбора какой-либо кнопки необходимо щелкнуть мышью именно на самом переключателе. Очень неудобно. А в обычных приложениях Windows для этой цели достаточно щелкнуть мышью на строке, которая связана с этим органом управления. То же самое можно сделать и в наших формах. Для этого следует создать необходимый орган управления, напечатать рядом с ним текстовую строку, которую вы намереваетесь привязать к нему, затем выделить строку вместе с самим органом управления и выполнить команду меню Insert/Form/Label (Вставка/Форма/Надпись). После этого надпись окажется привязанной к необходимому органу управления. Реализуется это при помощи следующей конструкции:

<input type="checkbox" name="C1" value="ON" id="fp1"><label for="fp1">Метка</label>.

В данном случае вы видите, как объявлен независимый переключатель, но, помимо известных вам параметров тэга <input>, появился параметр id, который введен специально для взаимодействия с тэгом <label>, объявляющем ассоциированную текстовую строку. В этом тэге появляется параметр for, чье значение должно совпадать со значением параметра id тэга <input>. Только в этом случае строка, заключенная между тэгами <label> и </label>, будет привязана к органу управления.

На этом мы заканчиваем обзор возможностей FrontPage 2000, которые применяются для создания форм. Более того, мы рассмотрели все основные возможности создания Web-страниц. Теперь вам предстоит перейти на более высокий уровень. Сайты должны создаваться в едином стиле. А достигнуть этого можно не только прямым указанием всех необходимых параметров. Это даже не поощряется, ведь у вас есть достаточно мощное средство единого стилевого оформления. Но об этом поговорим уже в следующем разделе.