На главную страницу
Форум txt.version   




Статья :: Form
Оглавление | Назад | Вперёд | Индекс

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

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

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 для вызывающей формы.

Метод из

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

Form

страницы в данном разделе 
 ancor  applet
 area.htm  array
 Индекс  Boolean
 button  Checkbox
 Классы, Конструкторы и Методы Java  Значения Цветов
 Оглавление  Куки Netscape
 date.htm  document
 event  FileUpload
 form.htm  Frame
 Function  Обработчики Событий
 Hidden  History
 Image  Оглавление
 java.htm  JavaArray
 JavaClass  JavaObject
 JavaPackage  Приложение A. Зарезервированные Слова
 Layer  JSException
 JSObject  Plugin
 link.htm  Location
 math.htm  MimeType
 navigator  netscape
 Number  Object
 Объекты, Методы и Свойства  Операции
 Option  Packages
 Приложения  Справочник по Классам LiveConnect
 Элементы Языка  Объекты. Справочник.
 Password  Plugin
 Об Этой Книге  Radio
 RegExp  Reset
 screen  Select
 Операторы  String
 Style  Submit
 sun.htm  text.htm
 Textarea  toc.htm
 Свойства и Функции Верхнего Уровня  Новые Возможности в Этой Версии
 window   


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста