 |
     |
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тэгом 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 | |
elements | |
encoding | |
length | |
method | |
name | |
target |
| Метод |
ОписаниеhandleEvent
| 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>
Строка, специфицирующая URL назначения для отправляемых данных формы.
Отправка формы по URL mailto: или news: требует привилегии UniversalSendMail. О безопасности см. книгу Клиентский JavaScript. Руководство.
JavaScript 1.1. По умолчанию это свойство разрушено/запорчено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.
Свойство action является отражением атрибута ACTION тэга FORM. Каждый раздел URL содержит свою информацию. См. в Location описание компонентов URL.
Здесь в свойство action формы musicForm устанавливается значение переменной urlName:
document.musicForm.action=urlName
Массив объектов, соответствующих элементам формы (таким как объекты checkbox, radio и Text) в порядке расположения в исходном коде.
Вы можете обратиться к элементам формы в коде путём использования массива 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.
Строка, специфицирующая MIME-кодирование формы.
Свойство encoding первоначально отражает атрибут ENCTYPE тэга FORM; однако установка свойства encoding переопределяет атрибут ENCTYPE.
Эта функция возвращает значение свойства encoding формы musicForm:
function getEncoding() {
return document.musicForm.encoding
}
Вызывает обработчик для специфицированного события.
handleEvent(event)
event |
Имя события, для которого специфицированный объект имеет обработчик. |
Об обработке событий см. книгу Клиентский JavaScript. Руководство.
Свойство form.length сообщает, сколько элементов имеется в форме. Вы можете получить ту же самую информацию с помощью form.elements.length.
Строка, специфицирующая, как информация полей формы отправляется на сервер.
Свойство method является отражением атрибута METHOD тэга FORM. Свойство method должно вычисляться в "get" или "post".
Эта функция возвращает значение свойства method формы musicForm:
function getMethod() {
return document.musicForm.method
}
Строка, специфицирующая имя формы.
JavaScript 1.1. По умолчанию это свойство разрушено/запорчено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.
Свойство 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()
Метод 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>
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.
Строка, специфицирующая имя окна, которому отправляются ответы после отправки формы.
Свойство target первоначально отражает атрибут TARGET тэгов A, AREA и FORM; однако установка target переопределяет этот атрибут.
Вы можете установить target путём использования строки, если эта строка содержит имя окна. Свойству target не может быть присвоено значение выражения или переменной JavaScript.
Здесь специфицируется, что ответы форме musicInfo отображаются в окне msgWindow:
document.musicInfo.target="msgWindow"
Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation
|
Книги-online