 |
Использование массива forms
|
|
|
|
Лабораторная работа
Работа с формами в JavaScript
Массив elements
Массив elements содержит все элементы HTML-формы - контрольные переключатели (checkbox), селекторные кнопки (radio-button), текстовые объекты (text) и другие, - в том порядке, в котором они определены в форме. Этот массив можно использовать для доступа к элементам формы в JS-программе по их порядковому номеру, не используя свойства name этих элементов. Массив elements, в свою очередь, является свойством объекта forms, поэтому при обращении к нему следует указывать имя формы, к элементу которой вы хотите обратиться:
formName.elements[i]
formName.elements[i].length
Здесь formName может быть либо именем объекта form, определенным при помощи атрибута name в теге <form>, либо элементом массива forms, например forms[i], где i - переменная, которая индексирует элементы массива. Значением свойства length является количество элементов, содержащихся в форме. Массив elemments включает данные только для чтения, т.е. динамически записать в этот объект какие-либо значения невозможно.
Свойства
Объект elements имеет только одно свойство, length, значением которого является количество элементов объекта form.
document.forms[0].elements.length возвратит значение, соответствующее количеству элементов в первой форме текущего документа.
Пример
Создадим пару элементов, например, поля ввода для имени и адреса:
Имя: Адрес:
Нажав на эту кнопку, можно увидеть элементы формы, назовем ее "Форма для примера". Третьим элементом будет кнопка, вызывающая функцию на JavaScript. Она также находится в данной форме.
Внимание: не корректно работает в Internet Explorer-е. Дело в том, что в этом браузере элементы формы хранятся не в виде строки. В NN должно быть нормально. IE 3.01 может даже вызвать ошибку. IE 4 и выше ошибки не выдает.
|
|
|
Теперь рассмотрим текст этой программы:
<html>
<head>
<script language="JavaScript">
<!--
function showElem(f) {
var formEl = " ";
for (var n=0; n < f.elements.length; n++) {
formEl += n + ":" + f.elements [n] +"\n";
}
alert("Элементы в форме '" + f.name + "':\n\n" + formEl);
}
//-->
</script>
</head>
<body>
<form name="Форма для примера">
Имя:
<input type="text" size=10 name="fullname">
Адрес:
<textarea name="adr"></textarea>
<BR>
<input type="button" value="Смотрим элементы" onClick="showElem(this.form)">
</form>
</body>
</html>
Здесь функция перебирает все элементы массива elements заданной формы, в данном примере их три, формирует строку formEl, содержащую информацию об элементах данного массива. IE покажет здесь в виде "n:[object]" т.е. этот браузер не содержит в массиве elements строки с информацией об объекте формы. Созданная строка (для удобства читаемости разделена "переводом строки \n") выводится в окне предупреждения с помощью метода alert(). Функция showEl() вызывается с аргументом this.form, который обращается к текущей форме. Если оператор this опустить, то из функции showEl() к форме придется обращаться с помощью выражения document.forms[n], - это не очень удобно, так как мы обращаемся из текущей формы.
Объект form и массив forms
Форма - это область гипертекстового документа, которая создается при помощи контейнера <form>... </form> и содержит элементы, позволяющие пользователю вводить информацию. Многие HTML-теги, например теги, определяющие поля ввода (text field), области текста (textarea), контрольные переключатели (checkbox), селекторные кнопки (radio button) и списки (selection list), располагаются только в контейнере <form>... </form>. Всем перечисленным элементам в языке JavaScript соответствуют отдельные объекты. Программы на языке JS могут обрабатывать формы непосредственно, получая значения, содержащиеся в необходимых элементах (например, для проверки ввода обязательных данных). Кроме того, данные из формы обычно передаются для обработки на удаленный Web-сервер.
|
|
|
Синтаксис
<form name="formName"
target="windowname"
action="serverURL"
method="get" | "post"
enctype="encodingType"
[onSubmit="handlerText"]>
</form>
Здесь атрибут name - строка, определяющая имя формы. Атрибут target задает имя окна, в котором должны обрабатываться события, связанные с изменением элементов формы. Для этого требуется наличие окна или фрейма с заданным именем. В качестве значений данного атрибута могут использоваться и зарезервированные имена _blank, _parent, _self и _top.
Атрибут action задает адрес URL сервера, который будет получать данные из формы и запускать соответствующий CGI-скрипт. Также можно послать данные из формы по электронной почте, указав при этом значения этого атрибута адрес URL типа mailto:...
Формы, передаваемые на сервер, требуют задания метода передачи (submission), который указывается при помощи атрибута method.
Метод GET присоединяет данные формы к строке адреса URL, заданного в атрибуте action.
При использовании метода POST информация из формы посылается как отдельный поток данных. В последнем случае CGI-скрипт на сервере считывает эти данные из стандартного входного потока (standard input stream). Кроме того, на сервере устанавливается переменная среды с именем QUERY_STRING, что обеспечивает еще один способ получения этих данных.
Атрибут enctype задает тип кодировки MIME (Multimedia Internet Mail Extensions) для посылаемых данных. Типом MIME по умолчанию является тип application/x-www-form-urlencoded.
К свойствам и методам формы в JavaScript-прграмме можно обратиться одним из способов:
formName.propertyName
formName.methodName (parameters)
forms[i].propertyName
forms[i].methodName (parameters)
Здесь formName соответствует атрибуту name объекта form, а i является целочисленной переменной, используемой для обращения к отдельному элементу массива forms, который соответствует определенному тегу <form> текущего документа.
Использование массива forms
К любой форме текущего гипертекстового документа можно обращаться как к элементу массива forms. Для этого необходимо указать индекс запрашиваемой формы. Например, forms[0] - первый тег <form> в текущем документе.
document.forms[i]
document.forms.length
document.forms['name']
Переменная i - это индекс, соответствующий запрашиваемой форме.
Выражение вида
|
|
|
document.forms[i]
можно также присвоить переменной
var myForm = document.forms[i];
Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге
<form>
<input type=text name=myField size=40>
...
</form>
то в JS-программе к этому полю позволяет обращаться переменная myForm. В частности, при помощи следующего оператора содержимое данного поля ввода присваивается новой переменной с именем result:
var result = myForm.myField.value;
Значение свойства length соответствует количеству форм в документе:
var numForms = document.forms.length
Массив forms содержит данные, которые используют только для чтения.
Свойства
Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега <form>:
action - соответствует атрибуту action;
elements - массив, содержащий все элементы формы;
encoding - соответствует атрибуту enctype;
length - количество элементов в форме;
method - соответствует атрибуту method;
target - соответствует атрибуту target
Массив forms имеет только одно свойство length - количество форм в документе.
Методы
Метод submit() применяется для передачи формы из JavaScript-программы. Его можно использовать вместо тега <input type=submit>, имеющегося в большинстве форм, информация которых должна передаваться на сервер.
Обработчики событий
Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом <input type=submit> в контейнере <form>, либо при передаче данных формы с помощью метода submit(), вызванного из JS-прграммы.
Пример
В следующем примере при нажатии кнопки передачи данных содержимое текстового поля посылается адресату по электронной почте:
Вот текст этой программы:
<form nethod="post"
action="mailto:[email protected]"
enctype="text/plain">
<input type="submit" value="Отправить почту">
<input type="reset" value="Очистить форму">
<textarea name="email" rows=5 cols=60>
</textarea>
</form>
Задание на работу:
Предусмотреть использование форм в разрабатываемой программе.
|
|
|
