Прежде, чем выполнять какие-либо манипуляции с формой и её элементами, нужно получить указатель на форму. Самый простой способ сделать это в 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";