Form типа переключателей, "радио" кнопок и списков выбора. Вы можете также использовать форму, чтобы послать данные на сервер.
| Объект client-side | |
| Реализовано в |
Navigator 2.0 Navigator 3.0: добавлен метод reset.Navigator 4.0: добавлен метод 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 на одиночный элемент или на массив элементов.
| Вызывает обработчик для указанного события. |
| Эмулирует нажатие кнопки мыши на кнопке сброса формы. |
| Представляет на рассмотрение форму. |
Примеры
Пример 1: Именованная форма. Следующий пример создает форму с именем myForm, которая содержит текстовые поля для имени и фамилии. Форма также содержит две кнопки, которые преобразуют имена в верхний регистр или в нижний регистр. Функция setCase показывает, как обратиться к форме по имени.
<HTML>
<HEAD>
<TITLE>Пример объекта Form</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>
Пример 2: Массив форм. Обработчик события
<FORM NAME="myForm">
<B>Имя:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20>
<BR><B>Фамилия:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20>
<P><INPUT TYPE="button" VALUE="Имя и фамилию в верхний регистр" NAME="upperButton"
onClick="setCase('upper')">
<INPUT TYPE="button" VALUE="Имя и фамилию в нижний регистр" NAME="lowerButton"
onClick="setCase('lower')">
</FORM>
</BODY>
</HTML>onLoad в следующем примере показывает имя первой формы в диалоговом окне Alert.
<BODY onLoad="alert('Вы смотрите на форму ' + document.forms[0] + ' !')">
Если имя формы musicType, alert показывает следующее сообщение:
Вы смотрите на форму <object musicType> !
Пример 3: Обработчик события onSubmit. Следующий пример показывает обработчик события onSubmit, который определяет, представить ли на рассмотрение форму. Форма содержит один объект Text, куда пользователь вводит три символа. onSubmit вызывает функцию checkData, которая возвращает true, если имеются 3 символа; иначе, она возвращает false. Обратите внимание, что обработчик события onSubmit, не обработчик события onClick кнопки submit, вызывает функцию checkData. onSubmit также содержит выражение return, которое возвращает значение, полученное функцией call.
<HTML>
Пример 4: Метод submit. Следующий пример подобен предыдущему, за исключением того, что для представления на рассмотрение формы используется метод
<HEAD>
<TITLE>Пример объекта Form/обработчика события onSubmit</TITLE>
<TITLE>Пример объекта Form</TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function checkData (){
if (document.myForm.threeChar.value.length == 3) {
return true}
else {
alert("Введите точно три символа. " + document.myForm.threeChar.value +
" не допустимо.")
return false}
}
</SCRIPT>
<BODY>
<FORM NAME="myForm" onSubmit="return checkData()">
<B>Введите 3 символа:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="submit" VALUE="Выполнить" NAME="submit1"
onClick="document.myForm.threeChar.value=document.myForm.threeChar.value.toUpperCase()">
</FORM>
</BODY>
</HTML>submit вместо объекта Submit. Обработчик события onSubmit формы не позволяет форме не быть переданной на рассмотрение. Форма использует обработчик события onClick, чтобы вызвать функцию checkData. Если значение допустимо, функция checkData представляет на рассмотрение форму, вызывая метод submit формы.
<HTML>
<HEAD>
<TITLE>Пример объекта Form/метода submit</TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function checkData (){
if (document.myForm.threeChar.value.length == 3) {
document.myForm.submit()}
else {
alert("Введите точно три символа. " + document.myForm.threeChar.value +
" не допустимо.")
return false}
}
</SCRIPT>
<BODY>
<FORM NAME="myForm" onSubmit="alert('Форма послана.')">
<B>Введите 3 символа:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="button" VALUE="Выполнить" NAME="button1"
onClick="checkData()">
</FORM>
</BODY>
</HTML>Смотрите также
Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea.
Свойства
action
Строка, определяющая URL адрессата для данных формы, которая представлена на рассмотрение.
| Свойство объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Navigator 4.0: Передача на рассмотрение формы в URL mailto: или news: требует привилегии UniversalSendMail. Для информации о защите в Navigator 4.0, смотрите Главу 7, "Защита JavaScript," в Руководстве по 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
|
| Только для чтения | |
| Реализовано в | Navigator 2.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].
userInfo.userName.value
Значение каждого элемента в массиве
userInfo.elements[0].valueelements полное выражение HTML для объекта.
Примеры
Смотрите примеры для Frame.
encoding
Строка, определяющая MIME кодирование формы.
| Свойство объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Описание
Свойство encoding первоначально отражает аттрибут ENCTYPE тэга FORM; однако, установка encoding переназначает аттрибут ENCTYPE.
Примеры
Следующая функция возвращает значение свойства encoding объекта musicForm:
function getEncoding() {
return document.musicForm.encoding
}Смотрите также
Form.action, Form.method, Form.target
length
Число элементов в форме.
| Свойство объекта |
Form
|
| Только для чтения | |
| Реализовано в | Navigator 2.0 |
Описание
Свойство form.length сообщает Вам, сколько элементов находится в форме. Вы можете получить ту же самую информацию, используюя form.elements.length.
method
Строка, определяющая, как поле формы вводит информацию, посылаемую серверу.
| Свойство объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Описание
Свойство method отражает аттрибут METHOD тэга FORM. Свойство method должно быть определено как "get" или "post".
Примеры
Следующая функция возвращает значение свойства method объекта musicForm:
function getMethod() {
return document.musicForm.method
}Смотрите также
Form.action, Form.encoding, Form.target
name
Строка, определяющая имя формы.
| Свойство объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Защита
Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита 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>")
}
}target
Строка, определяющая имя окна, куда направляется ответ после того, как форма была представлена на рассмотрение.
| Свойство объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Описание
Свойство target первоначально отражает аттрибут TARGET тэгов A, AREA и FORM; однако, установка target переназначает эти атрибуты.
Примеры
Следующий пример определяет, что ответ формы musicInfo отображается в окне msgWindow:
document.musicInfo.target="msgWindow"
Смотрите также
Form.action, Form.encoding, Form.method
Методы
handleEvent
Вызывает обработчик для указанного события.
| Метод объекта |
Form
|
| Реализовано в | Navigator 4.0 |
Синтаксис
handleEvent(event)
Параметры
event | Имя события, для которого определенный объект имеет обработчик события. |
Описание
Для информации об обработке событий, смотрите "Общая Информация о Событиях".
reset
Эмулирует нажатие кнопки мыши на кнопке сброса формы.
| Метод объекта |
Form
|
| Реализовано в | Navigator 3.0 |
Синтаксис
reset()
Параметры
Нет.
Описание
Метод reset восстанавливает значения по умолчанию элементов формы. Кнопка сброса не должна быть определена для формы.
Примеры
Следующий пример показывает объект Text, в котором пользователь должен напечатать "CA" или "AZ". Обработчик события onChange объекта Text вызывает функцию, которая выполняет метод reset формы, если пользователь обеспечивает неправильный ввод. Когда метод reset выполняется, значения по умолчанию восстановлены и обработчик события onReset формы показывает сообщение.
<SCRIPT>
function verifyInput(textObject) {
if (textObject.value == 'CA' || textObject.value == 'AZ') {
alert('Правильный ввод')
}
else { document.myForm.reset() }
}
</SCRIPT><FORM NAME="myForm" onReset="alert('Пожалуйста введите CA или AZ.')">
Введите CA или AZ:
<INPUT TYPE="text" NAME="state" SIZE="2" onChange=verifyInput(this)><P>
</FORM>Смотрите также
onReset, Reset
submit
Представляет на рассмотрение форму.
| Метод объекта |
Form
|
| Реализовано в | Navigator 2.0 |
Синтаксис
submit()
Параметры
Нет.
Защита
Navigator 3.0: Метод submit не выполняется без подтверждения, если action формы равен mailto:, news: или snews: URL. Пользователи могут представлять на рассмотрение формы с такими URL, щелкая представляющую на рассмотрение кнопку, но диалог подтверждения сообщит им, что они собираются отдать частную информацию.
Navigator 4.0: Передача на рассмотрение формы в URL mailto: или news: требует привилегию UniversalSendMail. Для информации о защите в Navigator 4.0, смотрите Главу 7, "Защита JavaScript," в Руководстве по JavaScript.
Описание
Метод submit представляет на рассмотрение определенную форму. Он выполняет то же самое действие, как и представляющая на рассмотрение кнопка.
Используйте представляющий на рассмотрение метод, чтобы послать данные обратно HTTP серверу. Метод submit возвращает данные, используя или "get" или "post," как определено в Form.method.
Примеры
Следующий пример представляет на рассмотрение форму с именем musicChoice:
document.musicChoice.submit()
Если musicChoice первая созданная форма, Вы также можете представить ее на рассмотрение следующим образом:
document.forms[0].submit()
Смотрите так же пример для Form.
Смотрите также
Submit, onSubmit
Последняя Модификация: 10/31/97 12:31:54
Все мессаги сюда:yanich@inbox.ru |