Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут предаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.
В наиболее общем виде оператор <FORM>, предназначенный для создания форм в документах HTML, выглядит следующим образом:<FORM NAME="Имя_формы" TARGET="Имя_окна" ACTION="Адрес_URL_расширения_сервера" METHOD=GET или POST ENCTYPE="Кодировка_данных" onSubmit="Обработчик_события_Submit"> . . . определение полей и органов управления . . . </FORM>Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.
Назначение параметра TARGET аналогично назначению этого же параметра в операторе <A>. Когда форма используется для передачи запроса расширению CGI сервера Web, ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.
С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.
Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.
Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.
Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.
Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:
| Свойство | Описание |
| action | Содержит значение параметра ACTION |
| elements | Массив всех элементов (полей и органов управления), определенных в форме |
| encoding | Содержит значение параметра ENCTYPE |
| length | Размер массива elements |
| method | Содержит значение параметра METHOD |
| target | Содержит значение параметра TARGET |
Большинство свойств первого набора просто отражает значения соответствующих параметров оператора <FORM>. Вы можете их использовать в сценариях JavaScript для проверки параметров. Что же касается массива elements, то в нем находятся объекты, соответствующие полям и органам управления, определенным в форме. Эти объекты образуют второй набор свойств объекта form:
| Свойство | Описание |
| button | Кнопка с заданной надписью |
| checkbox | Переключатель типа Check Box. Может использоваться в составе набора независимых друг от друга переключателей или отдельно |
| hidden | Скрытое поле, которое не отображается. Содержимое этого поля может быть считано и проанализировано расширением сервера Web, либо сценарием JavaScript |
| password | Текстовое поле для ввода паролей. Набранный в этом поле текст не отображается на экране |
| radio | Переключатель для группы зависимых друг от друга переключателей. Используется обычно для выбора одного значения из нескольких возможных |
| reset | Кнопка, с помощью которой пользователь может сбросить содержимое полей ввода и состояние переключателей в их исходное состояние |
| select | Список произвольных текстовых строк |
| submit | Кнопка для посылки данных из заполненной формы расширению сервера Web. Для этой кнопки можно задать произвольную надпись |
| text | Однострочное текстовое поле |
| textarea | Многострочное текстовое поле |
В общем виде кнопка класса button определяется в форме с помощью оператора <INPUT> следующим образом:
<INPUT TYPE="button" NAME="Имя_кнопки" VALUE="Надпись_на_кнопке" onClick="Обработчик_события">Параметр TYPE оператора <INPUT> должен иметь значение button, как это показано в примере. С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью параметра VALUE. Определив обработчик события, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.
Объект button имеет два свойства, отражающие значения соответствующих параметров оператора <INPUT>:
| Свойство | Описание |
| name | Значение параметра NAME |
| value | Значение параметра VALUE |
Для объекта button определен всего один метод, не имеющий параметров, - click:
click()Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.
В качестве примера приведен сценарий, выполняющийо обработку щелчка по кнопке с надписью Click me, расположенной в форме. Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button.
<HTML>
<HEAD>
<TITLE>Button demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
var szTxt="";
var szTxt1="";
szTxt=document.TestForm.bt.value;
szTxt1=document.TestForm.bt.name;
document.write("<HR>");
document.write("You press button: " + szTxt.bold()
+ ", name=" + szTxt1.bold());
document.write("<HR>");
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Click Button</H1>
<FORM NAME="TestForm">
<P><INPUT TYPE="button" NAME="bt" VALUE="Click me!"
onClick="btnClick();">
</FORM>
</BODY>
</HTML>
Посмотреть пример
работы данного скрипта
Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора <INPUT> с параметром TYPE, равным строке "checkbox":
<INPUT TYPE="checkbox" NAME="Имя_переключателя_checkbox" VALUE="Значение" CHECKED onClick="Обработчик_события"> Текст, отображаемый рядом с переключателемПараметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.
С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка "on". Сценарий JavaScript также может получить значение параметра VALUE.
Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.
Если для переключателя определен обработчик события, вы можете задать сценарий JavaScript, получающий управление после того как пользователь изменит состояние переключателя.
Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора <INPUT>:
| Свойство | Описание |
| name | Значение параметра NAME |
| checked | Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя |
| value | Значение параметра VALUE |
| defaultChecked | Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства |
Для объекта checkbox определен один метод click, не имеющий параметров:
click()При вызове этого метода переключатель устанавливается во включенное состояние.
Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей. Определение переключателя radio выглядит следующим образом:
<INPUT TYPE="radio" NAME=" Имя_переключателя_radio" VALUE="Значение" CHECKED onClick="Обработчик_события"> Текст, отображаемый рядом с переключателемНазначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.
Объект radio имеет следующие свойства:
| Свойство | Описание |
| name | Значение параметра NAME |
| checked | Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя |
| length | Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME |
| value | Значение параметра VALUE |
| defaultChecked | Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства |
Для объекта radio определен метод click, не имеющий параметров:
click()При вызове этого метода переключатель выбирается для работы.
В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.
Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.
Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка.
Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.
<HTML>
<HEAD>
<SCRIPT>
<!--
function resetRCHBox()
{
bTitle=false;
bHorzLine=false;
bTable=false;
szColor="Red";
}
function chkRadio(form,value)
{
szColor = value;
}
function btnClick(form)
{
var szTxt="";
document.write("<HEAD></HEAD><BODY>");
if(bTitle)
document.write("<H1>Switches Checkbox and Radio</H1>");
if(bHorzLine)
document.write("<HR>");
if(bTable)
{
document.write("<TABLE>");
szTxt=" " + bTitle;
document.write("<TR><TD><FONT COLOR=" + szColor
+ ">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>");
szTxt=" " + bHorzLine;
document.write("<TR><TD><FONT COLOR=" + szColor
+ ">HorzLine:</TD><TD>" + szTxt.bold() + "</TD></TR>");
szTxt=" " + bTable;
document.write("<TR><TD><FONT COLOR=" + szColor
+ ">Table:</TD><TD>" + szTxt.bold() + "</TD></TR>");
document.write("<TR><TD><FONT COLOR=" + szColor
+ ">Color:</TD><TD>" + szColor.bold() + "</TD></TR>");
document.write("</TABLE>");
}
else
{
document.write("<FONT COLOR=" + szColor + ">");
szTxt=" " + bTitle;
document.write("<BR>Title: " + szTxt.bold());
szTxt=" " + bHorzLine;
document.write("<BR>HorzLine: " + szTxt.bold());
szTxt=" " + bTable;
document.write("<BR>Table: " + szTxt.bold());
document.write("<BR>Color: " + szColor.bold());
document.write("</FONT>");
}
if(bHorzLine)
document.write("<HR>");
document.write("</BODY>");
}
// -->
</SCRIPT>
<TITLE>Переключатели checkbox и radio</TITLE>
</HEAD>
<BODY>
<SCRIPT>
<!--
var bTitle=false;
var bHorzLine=false;
var bTable=false;
var szColor="Red";
// -->
</SCRIPT>
<FORM NAME="myform">
<B>Page elements:</B>
<P><INPUT TYPE="checkbox" NAME="chkTitle"
onClick="if(this.checked) {bTitle=true;}"> Show title
<BR><INPUT TYPE="checkbox" NAME="HorzLine"
onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines
<BR><INPUT TYPE="checkbox" NAME="Table"
onClick="if(this.checked) {bTable=true;}"> Table view
<P><B>Text color:</B>
<P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Red
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Green
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Blue
<TABLE>
<TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page"
onClick="btnClick(this.form);"></TD>
<TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"
onClick="resetRCHBox();"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Посмотреть пример
работы данного скрипта
С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> приведен ниже:
<SELECT NAME="Имя_списка_select" SIZE="Размер_списка" MULTIPLE onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события"> <OPTION VALUE="Значение" SELECTED> Текст <OPTION VALUE="Значение"> Текст ... <OPTION> Текст </SELECT>Все параметры оператора <SELECT> необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.
Параметр SIZE задает размер видимой части списка в строках.
Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.
Для определения элементов списка предназначен оператор <OPTION>. Оператор <OPTION> может иметь два параметра - VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора <OPTION> следует текст, отображаемый в строках списка.
Ниже перечислены свойства объекта select, доступные сценарию JavaScript:
| Свойство | Описание |
| length | Количество элементов (строк) в списке |
| name | Значение параметра NAME |
| options | Массив объектов options, соответствующих элементам массива, заданным при помощи оператора <OPTION> |
| selectedIndex | Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов) |
Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором <OPTION>. Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:
| Свойство | Описание |
| defaultSelected | Отражает состояние параметра SELECTED |
| index | Порядковый номер (индекс) элемента списка |
| length | Количество элементов в выбранном объекте |
| name | Значение параметра NAME |
| selected | С помощью свойства selected сценарий JavaScript может выбрать данный элемент |
| selectedIndex | Номер выбранного элемента |
| text | Текст, указанный после оператора <OPTION> |
| value | Значение параметра VALUE |
Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.
Как видно из формата оператора <SELECT>, рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.
При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. В данном примере рассматривается два списка. Первый из них предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно). Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка.
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.
<HTML>
<HEAD>
<TITLE>Работа со списками</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szElement="Цвет: " +
Sel.ColorList.options[Sel.ColorList.selectedIndex].value +
" (" + Sel.ColorList.selectedIndex + ")" +
"\nРазмер: " +
Sel.SizeList.options[Sel.SizeList.selectedIndex].value +
" (" + Sel.SizeList.selectedIndex + ")";
alert(szElement);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Работа со списками</H1>
<FORM NAME="Sel">
<P>Выберите цвет:<P>
<SELECT NAME="ColorList">
<OPTION VALUE=Черный SELECTED> Черный
<OPTION VALUE=Белый> Белый
<OPTION VALUE=Красный> Красный
<OPTION VALUE=Оранжевый> Оранжевый
<OPTION VALUE=Желтый> Желтый
<OPTION VALUE=Зеленый> Зеленый
<OPTION VALUE=Голубой> Голубой
<OPTION VALUE=Синий> Синий
<OPTION VALUE=Фиолетовый> Фиолетовый
</SELECT>
<P>Выберите размер:<P>
<SELECT NAME="SizeList" SIZE=3>
<OPTION VALUE=Стандартный SELECTED> Стандартный
<OPTION VALUE=Большой> Большой
<OPTION VALUE=Средний> Средний
<OPTION VALUE=Маленький> Маленький
<OPTION VALUE=Очень_маленький> Очень маленький
</SELECT>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Посмотреть пример работы данного скрипта
Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению "text":
<INPUT TYPE="text" NAME="Имя_поля_text" VALUE="Значение" SIZE=Размер_поля onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события" onSelect="Обработчик_события">Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.
С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.
Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.
Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:
| Свойство | Описание |
| defaultValue | Отражает состояние параметра VALUE |
| name | Значение параметра NAME |
| value | Текущее содержимое поля редактирования |
Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.
Для объекта text определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.
Обработчики событий вызываются в следующих случаях:
| Обработчик | Когда вызывается |
| onFocus | Вызывается, когда поле редактирования получает фокус ввода |
| onBlur | Вызывается, когда поле редактирования теряет фокус ввода |
| onChange | При изменении содержимого поля редактирования |
| onSelect | При выделении содержимого поля редактирования |
Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.
Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю. Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы. Кнопка Reset устанавливает поля в исходное состояние.
<HTML>
<HEAD>
<TITLE>Работа с текстовыми полями</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szElement="Фамилия: " + Sel.family.value +
"\nИмя: " + Sel.Name.value +
"\nТелефон: " + Sel.PhoneNumber.value +
"\nВозраст: " + Sel.Age.value;
alert(szElement);
}
function CheckAge(age)
{
if(age < 18)
return "0";
else
return age;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Заполните анкету</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Фамилия:</B></TD><TD><INPUT TYPE="text"
NAME="family"
onChange="this.value=this.value.toUpperCase()"
SIZE="20" ></TD></TR>
<TR><TD><B>Имя:</B></TD><TD><INPUT TYPE="text"
NAME="Name" SIZE="20"></TD></TR>
<TR><TD><B>Телефон:</B></TD><TD><INPUT TYPE="text"
NAME="PhoneNumber" SIZE="10"></TD></TR>
<TR><TD><B>Возраст:</B></TD><TD><INPUT TYPE="text"
NAME="Age" VALUE="18" SIZE="4"
onChange="this.value=CheckAge(this.value)"
onFocus="this.select()"
></TD></TR>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Посмотреть пример работы данного скрипта
В тех случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами <TEXTAREA> и </TEXTAREA> располагают многострочное текстовое поле:
<TEXTAREA NAME="Имя_поля_textarea" ROWS="Количество_строк" COLS="Количество_столбцов" WRAP="Режим_свертки_текста" onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события" onSelect="Обработчик_события"> . . . Отображаемый текст . . . </TEXTAREA>Здесь с помощью параметра NAME вы должны указать имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля.
Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).
Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:
| Значение | Способ свертки текста |
| off | Свертка выключена, строки отображаются так, как вводятся |
| virtual | Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся |
| physical | При свертке в передаваемый текст записываются символы новой строки |
Для объекта textarea определены такие же методы, что и для объекта text. Это методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого многострочного поля редактирования.
Обработчики событий вызываются в следующих случаях:
| Обработчик | Когда вызывается |
| onFocus | Вызывается, когда поле редактирования получает фокус ввода |
| onBlur | Вызывается, когда поле редактирования теряет фокус ввода |
| onChange | При изменении содержимого поля редактирования |
| onSelect | При выделении содержимого поля редактирования |
Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.
Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель "Благодарность", сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.
Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель "Проблемы". Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки.
<HTML>
<HEAD>
<TITLE>Работа с многострочным текстовым полем</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var szOK = "Спасибо!\nВаша программа работает без ошибок.";
var szTrouble = "К сожалению, с вашей программой у нас возникли проблемы.";
var szProbList = "\nСерийный номер программы: ХХХХХХ\nДата покупки: ХХ-ХХ-ХХ";
function getDate()
{
var szDate = "";
szDate = new Date();
return szDate.toLocaleString() + "\n";
}
function chkRadio(form,value)
{
if(value == "Thanks")
Sel.Comment.value = getDate() + szOK;
else
Sel.Comment.value = getDate() + szTrouble + szProbList;
}
function init()
{
Sel.Comment.value = getDate() + szOK;
}
function Complete()
{
szMsg = Sel.Comment.value;
alert(szMsg);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Пришлите ваш отзыв</H1>
<FORM NAME="Sel">
<P><INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность
<BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы
<P><TEXTAREA NAME="Comment"
ROWS="8" COLS="40" WRAP="physical">
</TEXTAREA>
<P><INPUT TYPE="button" VALUE="Complete" onClick="Complete();">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
// -->
</SCRIPT>
</BODY>
</HTML>
Посмотреть пример работы данного скрипта
Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:
<INPUT TYPE="password" NAME="Имя_поля_text" VALUE="Значение" SIZE=Размер_поля>Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.
Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.
С помощью параметра VALUE можно записать в поле произвольную текстовую строку.
Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.
Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.
Сценариям JavaScript доступны три свойства поля редактирования password:
| Свойство | Описание |
| defaultValue | Отражает состояние параметра VALUE |
| name | Значение параметра NAME |
| value | Текущее содержимое поля редактирования |
Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.
Для объекта password определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.
В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.
В форме регистрации новый пользователь должен ввести свой идентификатор, а также задать пароль. В процессе ввода пароля легко допустить ошибку, поэтому обычно в системах регистрации требуется вводить новый пароль два раза. Если оба раза был введен одинаковый пароль, то он становится активным для данного пользователя.
Наш сценарий, обрабатывающий данные из формы, решает две задачи. Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях "Пароль" и "Проверка пароля". Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем. Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей.
<HTML>
<HEAD>
<TITLE>Ввод и проверка пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.pwd.value != Sel.pwd1.value)
alert("Ошибка при вводе пароля\nПопробуйте еще раз");
else
{
var szId="";
var szPwd="";
szId = Sel.id.value;
szPwd = Sel.pwd.value;
alert("Регистрация выполнена:\n" + "ID=" +
szId + "\nPassword=" + szPwd);
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Регистрация</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text"
NAME="id" onChange="this.value=this.value.toUpperCase()"
SIZE="20" ></TD></TR>
<TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password"
NAME="pwd" SIZE="20"></TD></TR>
<TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password"
NAME="pwd1" SIZE="20"></TD></TR>
</TABLE>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>