Оглавление | Назад | Вперёд | Индекс

Form

Даёт пользователю возможность вводить текст и делать выбор из Form -элементов, таких как переключатели/checkboxes, радио-кнопки и списки выбора. Вы можете также использовать форму для отправки данных на сервер.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлен метод reset.

JavaScript 1.2: добавлен метод handleEvent.

Создание

Тэгом HTML FORM. Машина выполнения JavaScript создаёт объект Form для каждого тэга FORM документа. Вы получаете доступ к объектам FORM через свойство document.forms и через именованные свойства этих объектов.

Для определения формы используйте стандартный синтаксис HTML с добавлением обработчиков событий JavaScript. Если Вы предоставляете значение атрибута NAME, Вы можете использовать это значение для индексирования в массиве forms. Кроме того, ассоциированный объект document имеет именованное свойство для каждой именованной формы.

Обработчики событий

Описание

Каждая форма в документе является отдельным объектом. Вы можете обратиться к элементам формы в Вашем коде с помощью имени элемента (из атрибута NAME) или в массиве Form.elements. Массив elements содержит вхождение для каждого элемента (такого как объекты Checkbox, Radio или Text) формы.

Если несколько объектов на одной форме имеют одинаковые значения атрибута NAME, массив с данным именем создаётся автоматически. Каждый элемент этого массива представляет отдельный объект Form. Элементы индексируются в порядке расположения в исходном коде, начиная с 0. Например, если два элемента Text и элемент Textarea на одной форме имеют атрибуты NAME, установленные в "myField", создаётся массив из элементов myField[0], myField[1] и myField[2]. Вы должны знать о такой ситуации в Вашем коде и знать, ссылается ли myField на единственный элемент или на массив элементов.

Свойства. Резюме.

Свойство	Описание
`action`	Отражает атрибут `ACTION`.
`elements`	Массив, отражающий все элементы формы.
`encoding`	Отражает атрибут `ENCTYPE`.
`length`	Отражает количество элементов формы.
`method`	Отражает атрибут `METHOD`.
`name`	Отражает атрибут `NAME`.
`target`	Отражает атрибут `TARGET`.

Метод. Резюме.

Метод	Описание
`handleEvent`	Вызывает обработчик для специфицированного события.
`reset`	Симулирует щелчок мыши по кнопке reset.
`submit`	Отправляет форму на сервер.

Кроме того, этот объект наследует методы watch и unwatch из объекта Object.

Примеры

Пример 1: Именованная форма. Создаётся форма myForm, содержащая текстовые поля для имени и фамилии. Форма содержит также две кнопки, переводящие все буквы в верхний или в нижний регистр. Функция setCase показывает, как обратиться к форме по её имени.

<HTML>
<HEAD>
<TITLE>Form object example</TITLE>

</HEAD>
<SCRIPT>
function setCase (caseSpec){
if (caseSpec == "upper") {

   document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase()

   document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase()}

else {
   document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase()

   document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase()}
}

</SCRIPT>

<BODY>
<FORM NAME="myForm">

<B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20>

<BR><B>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20>

<P><INPUT TYPE="button" VALUE="Names to uppercase" NAME="upperButton"

   onClick="setCase('upper')">
<INPUT TYPE="button" VALUE="Names to
lowercase" NAME="lowerButton"
   onClick="setCase('lower')">
</FORM>

</BODY>
</HTML>

Пример 2: Массив forms. Обработчик события onLoad в этом примере отображает имя первой формы в диалоговом окне Alert.

<BODY onLoad="alert('You are looking at the ' + document.forms[0] + ' form!')">

Если имя формы - musicType, диалог выведет следующее сообщение:

You are looking at the <object musicType> form!

Пример 3: Обработчик события onSubmit. В этом примере показано, как обработчик события onSubmit определяет, отправлять ли форму. Форма содержит один объект Text, где пользователь вводит три символа. onSubmit вызывает функцию checkData, которая возвращает true, если введены три символа; иначе она возвращает false. Заметьте, что обработчик onSubmit формы, а не обработчик кнопки submit onClick, вызывает функцию checkData. Также обработчик onSubmit содержит оператор return, возвращающий значение, полученное вызовом этой функции; это предотвращает отправку формы, если специфицированы неверные данные. См. также onSubmit.

<HTML>
<HEAD>
<TITLE>Form object/onSubmit event
handler example</TITLE>
<TITLE>Form object example</TITLE>
</HEAD>

<SCRIPT>
var dataOK=false
function checkData (){
if (document.myForm.threeChar.value.length
== 3) {
   return true}
   else {

      alert("Enter exactly three characters. " +
document.myForm.threeChar.value +
         " is not valid.")

      return false}
}
</SCRIPT>
<BODY>

<FORM NAME="myForm" onSubmit="return checkData()">
<B>Enter 3 characters:</B>

<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="submit" VALUE="Done"
NAME="submit1"
onClick="document.myForm.threeChar.value=document.myForm.threeChar.value.toUpperCase()">

</FORM>
</BODY>
</HTML>

Пример 4: Метод submit. Этот пример похож на предыдущий, за исключением того, что он отправляет форму с использованием метода submit вместо объекта Submit. Обработчик onSubmit формы не предотвращает отправку формы. Форма использует обработчик onClick кнопки для вызова функции checkData. Если значение верно, функция checkData отправляет форму, вызывая метод submit формы.

<HTML>
<HEAD>
<TITLE>Form object/submit method
example</TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function checkData (){

if (document.myForm.threeChar.value.length == 3) {
   document.myForm.submit()}

   else {
      alert("Enter exactly three characters.
" + document.myForm.threeChar.value +
         " is not
valid.")
      return false}
}
</SCRIPT>
<BODY>

<FORM NAME="myForm" onSubmit="alert('Form is being submitted.')">
<B>Enter
3 characters:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>

<P><INPUT TYPE="button" VALUE="Done" NAME="button1"
   onClick="checkData()">

</FORM>
</BODY>
</HTML>

См. также

Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea.

action

Строка, специфицирующая URL назначения для отправляемых данных формы.

Свойство из
Form
Реализовано в
JavaScript 1.0

Безопасность

Отправка формы по URL mailto: или news: требует привилегии UniversalSendMail. О безопасности см. книгу Клиентский JavaScript. Руководство.

JavaScript 1.1. По умолчанию это свойство разрушено/запорчено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство action является отражением атрибута ACTION тэга FORM. Каждый раздел URL содержит свою информацию. См. в Location описание компонентов URL.

Пример

Здесь в свойство action формы musicForm устанавливается значение переменной urlName:

document.musicForm.action=urlName

См. также

Form.encoding, Form.method, Form.target

elements

Массив объектов, соответствующих элементам формы (таким как объекты checkbox, radio и Text) в порядке расположения в исходном коде.

Свойство из	`Form`
Только для чтения
Реализовано в	JavaScript 1.0

Описание

Вы можете обратиться к элементам формы в коде путём использования массива elements. Этот массив содержит вхождение для каждого объекта (Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text или Textarea) формы в порядке расположения в исходном коде. Каждая радио-кнопка в объекте Radio появляется как отдельный элемент массива elements. Например, если форма myForm содержит текстовое поле и два переключателя, Вы можете обратиться к этим элементам как myForm.elements[0], myForm.elements[1] и myForm.elements[2].

Хотя Вы можете также обратиться к элементам формы по их именам (их атрибута NAME), массив elements предоставляет способ для обращения к объектам Form программно без использования их имён. Например, если первый объект формы userInfo является Text-объектом userName, Вы можете вычислить его одним из следующих способов:

userInfo.userName.value
userInfo.elements[0].value

Значение каждого элемента в массиве elements будет полным оператором HTML для этого объекта.

Для получения количества элементов формы используйте свойство length: myForm.elements.length.

Примеры

См. примеры для объекта window.

encoding

Строка, специфицирующая MIME-кодирование формы.

Свойство из	`Form`
Реализовано в	JavaScript 1.0

Описание

Свойство encoding первоначально отражает атрибут ENCTYPE тэга FORM; однако установка свойства encoding переопределяет атрибут ENCTYPE.

Пример

Эта функция возвращает значение свойства encoding формы musicForm:

function getEncoding() {
   return document.musicForm.encoding
}

См. также

Form.action, Form.method, Form.target

handleEvent

Вызывает обработчик для специфицированного события.

Метод из	`Form`
Реализовано в	JavaScript 1.2

Синтаксис

handleEvent(event)

Параметр

event

Имя события, для которого специфицированный объект имеет обработчик.

Описание

Об обработке событий см. книгу Клиентский JavaScript. Руководство.

length

Количество элементов формы.

Свойство из	`Form`
Только для чтения
Реализовано в	JavaScript 1.0

Описание

Свойство form.length сообщает, сколько элементов имеется в форме. Вы можете получить ту же самую информацию с помощью form.elements.length.

method

Строка, специфицирующая, как информация полей формы отправляется на сервер.

Свойство из	`Form`
Реализовано в	JavaScript 1.0

Описание

Свойство method является отражением атрибута METHOD тэга FORM. Свойство method должно вычисляться в "get" или "post".

Примеры

Эта функция возвращает значение свойства method формы musicForm:

function getMethod() {
   return document.musicForm.method
}

См. также

Form.action, Form.encoding, Form.target

name

Строка, специфицирующая имя формы.

Свойство из	`Form`
Реализовано в	JavaScript 1.0

Безопасность

Описание

Свойство name первоначально отражает значение атрибута NAME. Изменение свойства name переопределяет эту установку.

Пример

Функция valueGetter использует цикл for для итерации по массиву элементов формы valueTest. В окне msgWindow отображаются имена всех элементов формы:

newWindow=window.open("http://home.netscape.com")

function valueGetter() {
   var msgWindow=window.open("")

   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {

      msgWindow.document.write(newWindow.document.valueTest.elements[i].name
+ "<BR>")
   }
}

reset

Симулирует щелчок мыши по кнопке reset для вызывающей формы.

Метод из	`Form`
Реализован в	JavaScript 1.1

Синтаксис

reset()

Параметры

Отсутствуют.

Описание

Метод reset восстанавливает значения по умолчанию элементов формы. Кнопка reset не обязательно должна быть определена в форме.

Пример

Отображается объект Text, в котором пользователь печатает "CA" или "AZ". Обработчик события объекта Text onChange вызывает функцию, которая выполняет метод reset формы, если пользователь делает неверный ввод. Если метод reset выполняется, восстанавливаются значения по умолчанию, и обработчик onReset формы выводит сообщение.

<SCRIPT>
function verifyInput(textObject) {

   if (textObject.value == 'CA' || textObject.value == 'AZ') {

      alert('Nice input')
   }

   else { document.myForm.reset() }
}
</SCRIPT>

<FORM NAME="myForm" onReset="alert('Please enter CA or AZ.')">

Enter CA or AZ:
<INPUT TYPE="text" NAME="state" SIZE="2" onChange=verifyInput(this)><P>

</FORM>

См. также

onReset, Reset

submit

Отправляет форму.

Метод из	`Form`
Реализован в	JavaScript 1.0

Синтаксис

submit()

Параметры

Отсутствуют.

Безопасность

Отправка по URL mailto: или news: требует привилегии UniversalSendMail. О безопасности см. книгу Клиентский JavaScript. Руководство.

JavaScript 1.1: метод submit терпит неудачу без вывода сообщения об этом, если action формы это URL mailto:, news: или snews:. Пользователи могут отправлять формы с такими URL, щелкнув по кнопке submit, но диалог сообщит им, что отправляемая информация может быть закрытой или секретной.

Описание

Метод submit отправляет специфицированную форму. Он выполняет те же действия, что и кнопка submit.

Используйте метод submit для отправки данных обратно на HTTP-сервер. Метод submit возвращает данные с использованием метода get" или "post," как специфицировано в Form.method.

Примеры

Здесь отправляется форма musicChoice:

document.musicChoice.submit()

Если musicChoice это первая созданная форма, Вы можете также отправить её так:

document.forms[0].submit()

См. также пример для Form.

См. также

Submit, onSubmit

target

Строка, специфицирующая имя окна, которому отправляются ответы после отправки формы.

Свойство из	`Form`
Реализовано в	JavaScript 1.0

Описание

Свойство target первоначально отражает атрибут TARGET тэгов A, AREA и FORM; однако установка target переопределяет этот атрибут.

Вы можете установить target путём использования строки, если эта строка содержит имя окна. Свойству target не может быть присвоено значение выражения или переменной JavaScript.

Пример

Здесь специфицируется, что ответы форме musicInfo отображаются в окне msgWindow:

document.musicInfo.target="msgWindow"

См. также

Form.action, Form.encoding, Form.method

Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation