Семейство forms
При создании формы, доступ к ней осуществляется через семейство
forms. Для этого требуется либо указать номер формы, соответствующий
элементу автоматически создаваемого массива, либо указать имя формы,
заданное параметром name (пример 1).
Пример 1. Обращение к форме
<html> <body>
<form name=data> ... </form> <script
language="JavaScript"> alert(document.forms.length) //
Получаем общее количество форм на странице alert(document.forms[0].name)
// Узнаем имя первой формы через массив forms alert(document.forms.data.length)
// Определяем количество элементов в форме с именем data alert(document.forms["data"].length)
// То же самое </script> </body> </html>
Нумерация элементов массива всегда начинается с нуля, поэтому
обращение к первой форме будет document.forms[0], ко второй —
document.forms[1]. Вместо индекса массива можно указывать имя формы, в
данном случае используется data — document.forms["data"]. Поскольку
удобней всегда обращаться к форме по имени, рекомендуется всегда его
задавать
Семейство all
Семейство all является характерным для браузера Internet Explorer, но
также поддерживается многими браузерами, кроме Netscape версии 6 и
выше. Обращение к форме происходит как к элементу массива с именем,
совпадающим с именем формы — document.all["data"] или напрямую —
document.all.data (пример 2).
Пример 2. Использование семейства all
<html> <body> <form name=data> ...
</form> <script language="JavaScript"> alert(document.all["data"].length) alert(document.all.data.name)
</script> </body> </html>
Internet Explorer поддерживает еще один способ обращения к формам —
через семейство getElemetById. Пример —
document.getElementById("data").length, где data является именем формы.
Получение значений элементов формы
Обращение к элементам формы осуществляется посредством семейства
elements или напрямую по имени элемента (пример 3).
Пример 3. Получение значений
<html> <body> <form name=data> <input
type=text name=userName value="Введите ваше
имя"> </form>
<script language="JavaScript">
alert(document.forms.data.elements.length) // Общее число элементов в
форме alert(document.forms[0].elements[0].value) // Значение первого
элемента alert(document.forms["data"].userName.value) // Значение
элемента с именем userName </script> </body> </html>
Нумерация массива, как и в случае с семейством forms ведется с нуля,
поэтому обращение к первому элементу формы будет elements[0]. Для
большого количество данных в форме, значения элементов лучше получать по
их имени. Здесь важна чувствительность к регистру, поэтому имя
элемента, указанное параметром name, должно быть написано точно так же и
при обращении к нему из JavaScript. Если в примере указать username
вместо userName, ошибка не возникнет, но и нужные данные не получим.
Работа с фреймами
В случае использования фреймовой структуры, обращение к данным формы
несколько меняется. Доступ из одного фрейма к другому происходит через
семейство frames, оно аналогично по использованию семейству forms
(пример 4).
Пример 4. Обращение к фрейму
parent.frames[0].forms.data.length
// Получаем количество элементов формы с именем data в первом фрейме parent.frames["main"].forms.data.length
// Получаем количество элементов формы с именем data в фрейме main parent.frames.main.forms.data.length
// То же самое parent.frames.main.forms.data.textfield.value //
Значение поля textfield
В общем случае получение значения элемента формы будет таким.
parent.frames.имя_фрейма.имя_формы.имя_поля.value
В примере 5 используется два фрейма, данные из формы фрейма с именем
main присваиваются текстовому полю фрейма с именем left.
Пример 5. Использование форм во фреймах
Файл index.html <html> <frameset
rows=* cols=30%,*> <frame src=left.html name=leftFrame> <frame
src=main.html name=mainFrame> </frameset> </html> Файл
left.html <html><body>
<form
name=form1> <input type=text name=textfield1> </form> </body> </html> Файл
main.html <html> <head> <script
language="JavaScript"> function
peredast(f) { parent.frames.leftFrame.form1.textfield1.value
= f.textfield2.value; } </script> </head> <body> <form
name=form2 onSubmit="return peredast(this)"> <input type=text
name=textfield2> <input type=submit value="Передать"> </form> </body> </html>
Для имен фреймом значение регистра также имеет принципиальное
значение, при обращении из JavaScript имя фрейма необходимо писать, как
оно указано в параметре name.
Резюме
Обращаться к элементам форм лучше всего через семейство forms, оно
наиболее универсально и поддерживается всеми браузерами. При большом
количестве разных форм на странице им удобнее задавать свои собственные
имена и адресоваться к ним по их имени. Разницы в том, как использовать
форму — косвенно, как массив или прямо, как свойство семейства, нет.
Приведенные записи идентичны по результату.
document.forms["htmlField"].length document.forms.htmlField.length
Значения элементов форм также удобно получать, обращаясь к ним по их
имени, которое задается параметром name.
document.forms["имя формы"].имя элемента.value или document.forms.имя
формы.имя элемента.value
JavaScript чувствителен к регистру, поэтому имена в коде HTML и
скрипте должны быть идентичны.
Использовать семейство elements целесообразно при однотипной
обработке многих данных. Тогда можно использовать циклы, где в качестве
счетчика будет выступать номер элемента формы.
|