Получение указателя на форму и её элементы

Прежде, чем выполнять какие-либо манипуляции с формой и её элементами, нужно получить указатель на форму. Самый простой способ сделать это в HTML документе, это использовать специальную коллекцию DOM под названием forms. Коллекция forms это массив, содержащий ссылки на каждую форму на странице. Каждая из этих ссылок имеет подколлекцию, которая называется elements, и позволяет вам получать доступ к каждому элементу формы. Вы можете получать доступ к форме посредством индекса либо через ID формы (так как массив forms является ассоциативным массивом, где в качестве идентификатора используется ID формы):

var formByIndex = document.forms[0];
var formByID = document.forms["myForm"];

В этом примере обе ссылки указывают на одну и ту же форму, однако первая ссылка получена через индекс, а вторая через ID формы. Конечно, намного безопаснее получать ссылку на форму через ID, поскольку при добавлении в документ еще одной формы, порядок форм на странице может измениться, и прийдется вручную изменять индексы в вашем скрипте. Также можно получать ссылки на форму напрямую через объект document (document.formID), однако это крайне неэффективно, поскольку браузер в этом случае должен обойти все дерево DOM в поисках нужного элемента.

Общие методы получения ссылок на элементы в документе также пригодны и для работы с формами. Это getElementById и getElementsByTagName, которые работают аналогично представленным выше функциям:

var formByIndex = document.getElementsByTagName("form")[0];
var formByID = document.getElementById("myForm");

Чтобы получить ссылки на элементы формы, нужно использовать коллекцию elements, обращаясь к ней либо по индексу либо по ID или имени элемента (name/id):

var firstElement = document.forms["myForm"].elements[0];
var lastElement = document.forms["myForm"].elements["lastName"];

Можно также использовать запись, напоминающую двумерный массив:

var firstElement = document.forms["myForm"]["firstName"];

После того, как ссылка на элемент формы получена, можно получать или изменять их значения используя свойство value:

var myForm = document.forms["myForm"];
var oldValue = myForm["firstName"].value;
myForm["firstName"].value = "New Value";