Даёт пользователю возможность вводить текст и делать выбор из 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
на единственный элемент или на массив элементов.
Кроме того, этот объект наследует методы watch и unwatch
из объекта
Object.
Примеры
Пример 1: Именованная форма. Создаётся форма myForm,
содержащая текстовые поля для имени и фамилии. Форма содержит также две кнопки,
переводящие все буквы в верхний или в нижний регистр. Функция setCase
показывает, как обратиться к форме по её имени.
Пример 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.
Пример 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>
Вы можете обратиться к элементам формы в коде путём использования массива 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,
Вы можете вычислить его одним из следующих способов:
Свойство
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". Обработчик события объекта TextonChange
вызывает функцию, которая выполняет метод reset формы, если
пользователь делает неверный ввод.
Если метод reset выполняется, восстанавливаются значения по
умолчанию, и обработчик onReset формы выводит сообщение.
<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>
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 это первая созданная форма, Вы можете также
отправить её так:
Свойство target первоначально отражает атрибут TARGET
тэгов A, AREA и FORM; однако установка
target переопределяет этот атрибут.
Вы
можете установить target путём использования строки, если эта
строка содержит имя окна. Свойству target не может быть
присвоено значение выражения или переменной JavaScript.
Пример
Здесь специфицируется,
что ответы форме musicInfo отображаются в окне msgWindow:
