Глава 12

Построение форм

В предыдущих главах мы уже неоднократно использовали HTML-тег <FORM> позволяющий создавать формы для обработки данных. Впрочем, в ColdFusion существует тег <CFFORM>, предназначенный для той же цели, но при этом включающий в себя помимо текстовых полей ввода, флажков, переключателей (или радиокнопок) и списков, такие элементы, как дерево (tree), движок (slider), сетку данных (grid), а также предоставляющий возможность дополнять форму собственными Java-апплетами.

Помимо дополнительных элементов, позволяющих с легкостью обогатить собственные формы, применение тега <CFFORM> в сочетании с тегами ввода помогает контролировать поля ввода с помощью встроенного атрибута VALIDATE, тем самым облегчая написание кода. В то же время вы можете использовать HTML-тег <FORM> в комбинации с тегом <CFFORM>, используя атрибут PASSTHROUGH, но обо всем по порядку.

Тег формы <CFFORM> имеет следующие базовые управляющие элементы:

• <CFINPUT> — предназначен для размещения текстовых полей ввода (text input boxes), флажков (checkboxes) и переключателей (radio buttons);
  
• <CFSELECT> — задает список, позволяющий выбрать один или несколько вариантов.
  

Тег формы <CFFORM> может содержать управляющие элементы, основанные на Java-апплетах:

• <CFTEXTINPUT> — текстовое поле ввода с возможностью форматирования текста;
  
• <CFSLIDER> — движок, перемещаемый по вертикали или горизонтали, позволяющий визуально управлять числовыми величинами в указанном диапазоне;
  
• <CFTREE> — дерево, представляющее собой элемент управления для создания иерархического списка;
  
• <CFGRID> — сетку данных, позволяющую организовать работу с данными в виде сетки-таблицы со строками и колонками;
  
• <CFAPPLET> — собственные Java-апплеты.
  

Тег <CFFORM>

Синтаксис:

<CFFORM NAME = "name"

ACTION = "form_action"

PRESERVEDATA = "Yes I No"

ENABLECAB = "Yes | NO"

ONSUBMIT = "javascript"

TARGET = "window__name"

ENCTYPE = "type"

PASSTHROUGH = "HTML_attributes"

CODEBASE = "URL"

ARCHIVE = "URL"> Элементы формы </CFFORM>

В табл. 12.1 представлено описание атрибутов тега <CFFORM>.

Таблица 12.1. Описание атрибутов тега <CFFORM>

Тег <CFINPUT>

С помощью тега <CFINPUT> можно создавать такие управляющие элементы, как текстовые поля ввода, поля ввода пароля, флажки и переключатели (радиокнопки). За выбор типа управляющего элемента отвечает обязательный атрибут TYPE тега <CFINPUT>, который может принимать значения:

• text — текстовое поле ввода (по умолчанию); П password — поле ввода пароля;
  
• checkbox — флажек;
  
• radio — переключатель.

Например:

<CFINPUT TYPE="text" NAME="FirstName" VALUE="Anna" SIZE="10" MAXLENGTH="11">

Таким образом, мы создаем текстовое поле с заранее определенным значением "Anna", указанием размера поля с помощью атрибута SIZE и установкой максимального количества вводимых символов, используя атрибут MAXLENGTH.

Или, например:

<CFINPUT TYPE="password" NAME="Password" SIZE="10" MAXLENGTH="11">

С помощью приведенного примера создаем поле для ввода пароля. Следует отметить, что атрибуты SIZE и MAXLENGTH не распространяются на элементы С типами radio И checkbox.

Следующий пример:

<CFINPUT TYPE="checkbox" NAME="SubDis" VALUE="1" CHECKED="Yes">

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

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

Children<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="1"> Adult><CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="2" CHECKED> Senior<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="'3">

В этом примере отметим следующее, все три элемента имеют общее имя (атрибут NAME равен "AgeGroup"), тем самым мы указываем, что эти элементы относятся к одной группе, только один из них может быть выбран, и его значение будет передано. При использовании переключателей следует указывать значения элементов, используя атрибут VALUE. С помощью атрибута CHECKED мы указали выбранное по умолчанию значение равное 2. Заметим, что в ColdFusion для атрибутов с возможными значениями наподобие Yes/No, необязательно записывать Yes или NO, можно просто указать атрибут, и такая конструкция будет означать Yes.

Полный код может выглядеть так:

<HTML> <HEAD>

<TITLE>CFINPUT</TITLE> </HEAD> <BODY>

<hl>Log In</hl>

<TABLE border='0' cellspacing='2' cellpadding='2'>

<CFFORM NAME="Forml" ACTION="LogInGO.cfm">

<TR><TD align="right">First Name: </TD><TD>

<CFINPUT TYPE="text" NAME="FirstName" VALUE="Anna"

SIZE="10" MAXLENGTH="11"> </TDX/TR>

<TR><TD align="right">Password:</TD><TD>

<CFINPUT TYPE="password" NAME="Password"

SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Age Group:</TD><TD>

Children<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="1"> Adult<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="2" CHECKED Senior<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="3"> </TD></TR> <TRXTD align="right">To subscribe for dispatch:</TD><TD>

<CFINPUT TYPE="checkbox" NAME="SubDis" VALUE="1" CHECKED="Yes"> </TD></TR>

<TR><TD align="right"xinput type='submit' value='Send'></TD>

<TD><input type='reset' value=' Reset '></TD></TR> </CFFORM>

</TABLE> </BODY> </HTML>

Для удобства размещения элементов на странице мы использовали HTML-тег <TABLE>, а флажок SubDis поместили в конце для придания форме эстетического вида.

Контроль ввода данных

При создании форм достаточно часто приходится проверять правильность заполнения полей формы, как мы уже неоднократно демонстрировали, как с помощью программ на языке JavaScript, так и тегов ColdFusion. Однако при использовании тегов <CFINPUT> и <CFTEXTINPUT> можно проконтролировать введенные данные без написания какого-либо кода, указав атрибут VALIDATE, ВХОДЯЩИЙ В ЭТИ тэги.

Атрибут VALIDATE, в свою очередь, может принимать следующие значения:

• Date — проверяет соответствие значения поля американскому формату даты (mm/dd/yyyy);
  
• Eurodate — проверяет соответствие значения поля европейскому формату даты (dd/mm/yyyy);
  
• Time — проверяет соответствие формату времени (hh:mm:ss);
  
• Float — проверяет соответствие типу данных float;
  
• integer — проверяет соответствие типу данных integer;
  
• Telephone — проверяет соответствие телефонного номера формату "###-###-####", где дефис можно опускать, а код города и телефонный номер должны начинаться с цифры;
  
• zipcode — проверяет соответствие почтового адреса, который может состоять из 5 или 9 цифр, формату "#####-####"; только для США;
  
• Creditcard — проверяет соответствие номера кредитной карточки определенному формату;
  
• social_security_number — проверяет соответствие номера социальной карточки формату "###-##-####";
  
• Reguiar_expression - проверяет соответствие указанного выражения формату регулярного выражения.
  

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

Контроль с помощью регулярных выражений

Помимо значений, контролирующих ввод данных с предопределенными правилами при использовании тегов <CFINPUT> и <CFTEXTINPUT>, можно применять регулярные выражения (regular expression) для проверки соответствия текста, вводимого пользователем, собственному образцу, указанному с помощью атрибута PATTERN. Для определения образца того или иного поля ввода необходимо использовать обычные символы в сочетании со специальными символами.

Регулярные выражения позволяют проверять текстовые поля ввода для разнообразных условий. Можно создавать регулярное выражение, которое соответствует только числам в определенном диапазоне. Можно объединять простые регулярные выражения в сложные критерии поиска, чтобы соответствовать сложным образцам, например, одного из слов с различными окончаниями. Также в регулярных выражениях можно использовать переменные и функции ColdFusion, т. к. ColdFusion Server вычисляет переменные и функции прежде, чем определяется регулярное выражение.

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

Специальными символами следует считать:

-*?.[^$(){|\

Приведем характерные правила для регулярных выражений. 3 Точка (.) соответствует любому символу.

• Набор символов, указанных в квадратных скобках ( [] ), соответствует одному из символов в этих скобках. Например, [abc] предполагает а, ь или с.
  
• Символ дефиса (-) позволяет указывать диапазон. Например, [A-F] предполагает любой символ от А до F в верхнем регистре.
  
• Если первым символом в скобках указан знак ^, это соответствует любому кроме указанных символов. Например, [^аbс] предполагает любой символ за исключением а, ь или с.
  
• Для игнорирования чувствительности к регистру клавиатуры можно указывать необходимый символ двойным написанием как, например [Аа] .
  
• Группа символов, указанных в круглых скобках, представляет некую единицу, с которой можно производить какие-либо действия. Например, (Кu) + предполагает повторение KU.
  
• Символы или сгруппированное выражение, сопровождаемое знаком звездочка (*), предусматривают наличие или отсутствие значения. Например, [A-F] * предполагает существование или отсутствие любого символа от А до F в верхнем регистре.
  
• Символы или сгруппированное выражение, сопровождаемые знаком вопроса (?), предполагают нулевое значение или регулярное выражение.
  

Например (good) ?bye предполагает goodbye или bye.

• Знак ^л в начале регулярного выражения соответствует началу поля.
  
• Знак $ в конце регулярного выражения соответствует окончанию поля.
  
• Регулярное выражение может состоять из нескольких выражений. Например, [A-F] [a-f]* предполагает любое слово, состоящие из букв от а до f независимо от регистра.
  
• Символ | позволяет осуществлять выбор между двумя выражениями. Например, cold(erlest) Предполагает colder или coldest.
  
• Фигурные скобки (о) используются для указания диапазона повторения регулярного выражения в формате {min,max}, где min — положительное целое число, указывающее минимальное количество повторений, a max — число, равное или превосходящее min, указывает максимальное количество повторений. Например (mu) {2,4} предполагает от 2 до 4 пар повторения mu. Синтаксис {,mах} недопустим.
  

Также при формировании регулярных выражений можно использовать escape-последовательности. Например, такие как:

• \d — число от 0 до 9, соответствует [0-9];
  
• \о — любой символ кроме чисел, соответствует [^0-9];
  
• \w — алфавитно-числовой символ или подчеркивание, соответствует " [А-
  
• z0-9_];
  
• Xw—не алфавитно-числовой символ или подчеркивание, соответствует
  
• [_A-Za-z0-9_]
  

И Т.Д.

Пример использования атрибута VALIDATE

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

<HTML> <HEAD>

<TITLE>CFFORM Validation</TITLE> </HEAD> <BODY>

<hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Forml" ACTION="SignUpGO.cfm" >

<TR><TD align="right">E-Mail</TDXTR>

<CFINPUT TYPE="text" NAME="EMail"

REQUIRED="Yes" VALIDATE="Regular_expression"

РАТТЕКЫ="^[A-Za-z0-9_.]+(@){1}[A-Za-zO-9_.]+$"

SIZE="15" MAXLENGTH="16"> </TD></TR>

<TR><TD align="right">First Name</TD><TD>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" VALIDATE="Regular_expression"

PATTERN="[A-Za-z]"

MESSAGE="First Name, should not be empty and to include symbols 'A-Za-z'"

SIZE="10",MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Birthday</TD><TD>

<CFINPUT TYPE="text" NAME="Birthday"

REQUIRED="Yes" VALIDATE="Eurodate"

SIZE="10" MAXLENGTH="11"> </TD></TR>

<TRXTD align="right">Phone Num.</TD><TD>

<CFINPUT TYPE="text" NAME="PhoneNum"

REQUIRED="Yes" VALIDATE="Telephone" SIZE="12" MAXLENGTH="13"> </TD></TR> <TR><TD align="right"><input type='submit' value=' Add '></TD>

<TD><input type='reset' value='Clear'></TD></TR> </CFFORM>

</table> </BODY> </HTML>

В приведенном примере мы создаем правила ввода для полей EMail и FirstName, используя регулярные выражения, и указываем контролирующие значения для полей Birthday и phoneNum со встроенными правилами. При этом для поля FirstName создаем собственное сообщение об ошибке.

Контроль с помощью кода JavaScript

Как отмечалось, в предыдущих разделах мы уже применяли HTML-тег <FORM>, позволяющий создавать формы для обработки данных, где, впрочем, уже и использовали код JavaScript для контроля вводимых данных. При указании тега <CFFORM> также можно добавлять код JavaScript. Для этой цели следует использовать атрибут ONVALIDATE таких элементов формы как <CFINPUT>, <CFTEXTINPUT>, <CFSLIDER>, <CFTREE>, <CFGREED>.

При этом функции, указанной атрибутом ONVALIDATE, передаются такие объекты, как форма (form_obj), текущий элемент ввода (input_obj) и значение текущего элемента ввода.

Можно также использовать атрибут ONERROR для указания функции JavaScript, которая выполняется, если при заполнении полей формы происходит ошибка, т. е. когда введенные значения не удовлетворяют установленным правилам, причем независимо от того, с помощью VALIDATE или ONVALIDATE регулируются эти правила.

Атрибут ONERROR возможно применять в таких элементах формы, как <CFINPUT>, <CFTEXTINPUT>, <CFSELECT>, <CFSLIDER>, <CFTREE>, <CFGREED>.

При этом функции, указанной атрибутом ONERROR, передаются такие объекты, как форма (form_obj), текущий элемент ввода (input__obj), значение текущего элемента ввода и текст сообщения об ошибке.

Пример с использованием JavaScript

Приведенный далее пример продемонстрирует проверку заполняемых полей текущей формы, используя как значения атрибута VALIDATE с применением атрибута ONERROR, так и код JavaScript, указывая при этом названия функций с помощью атрибута ONVALIDATE:

<HTML> <HEAD>

<TITLE>CFFORM JavaScript Validation</TITLE> </HEAD> <BODY>

<script>

function Birthday_error(form, input, val, mess)

{ input.value='dd/mm/yyyy'; alert(mess); }

function Pass_(form){

if (form.Pass.value == "")

{ return (false); }

else { return (true); } }

function Conf_(form, input, val){

if (form.Pass.value = val)

{ return (true); }

else { return (false); } }

</script> <hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Forml" ACTION="SignUpGO.cfm" >

<TR><TD align="right">First Name</td><td>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" VALIDATE="Regular_expression" PATTERN="[A-Za-z]" SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Birthday</TD><TD>

<CFINPUT TYPE="text" NAME="Birthday"

REQUIRED="Yes" VALIDATE="Eurodate" ONERROR="Birthday_error" SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Password</TD><TD>

<CFINPUT TYPE="password" NAME="Pass"

REQUIRED="Yes" ONVALIDATE="Pass_" MESSAGE="Password, should not be empty" SIZE="8" MAXLENGTH="9"> </TD></TR>

<TR><TD align="right">Confirm</TD><TD>

<CFINPUT TYPE="password" NAME="Conf"

REQUIRED="Yes" ONVALIDATE="Conf_" MESSAGE="Fields: Password and Confirm,

should be identical!" SIZE="8" MAXLENGTH="9"> </TD></TR>

<TRXTD align="right"xinput type='submit' value=' Add '></TD>

<TD><input type='reset' value='Clear'></TD></TR>

</CFFORM> </TABLE>

</BODY> </HTML>

В приведенном примере мы создаем правила ввода для поля FirstName, используя регулярное выражение, указываем контролирующее значение для поля Birthday со встроенным правилом с помощью атрибута ONERROR и устанавливаем для полей Pass и conf контроль над вводом данных с помощью JavaScript.

В то же время вы можете добавить HTML-тег <FORM> в комбинации с тегом <CFFORM>, используя атрибут PASSTHROUGH следующим образом:

<HTML> <HEAD>

<TITLE>CFFORM(PASSTHROUGH) JavaScript Validation</TITLE> </HEAD> <BODY> <script>

function FName(val){

if(val=="") return false; else return true; }

</script> <hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Form1" ACTION="SignUpGO.cfm">

<TR><TD align="right">First Name</TD><TD>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" SIZE="10" MAXLENGTH="11" MESSAGE="First Name,

should not be empty" PASSTHROUGH="Yes" onClick = "FName(this.value)"> </TD></TR>

<TR><TD align="right"xinput type='submit' value=' Add '></TD>

<TD><input type=' reset' value=' Clear'></TD></TR> </CFFORM>

</TABLE> </BODY> </HTML>

В приведенном примере мы указываем атрибут PASSTHROUGH для поля FirstName и определяем при возникновении события onclick выполнение функции FName (this, value), что позволяет контролировать ввод данных для этого поля с помощью JavaScript.