How to work with forms in javascript

Представим, что в нашем документе есть форма form1 (параметр name) с текстовым полем firstname. Обратиться к этому полю можно через коллекцию forms:

document.forms['form1'].firstname.value

При желании к форме можно обратиться напрямую, что делает код компактнее:

document.form1.firstname.value

Существует и третий способ обращения к форме — по индексу:

document.forms[0].firstname.value

Нумерация форм начинается с 0. Если в документе только одна форма, то её номер - 0.

Получить доступ к элементу независимо от того, находится ли он внутри формы или нет, можно с помощью метода getElementById() объекта document:

document.getElementById("firstname").value

Элементы формы также доступны через коллекцию elements, например:

document.forms["form1"].elements["firstname"].value;

document.forms["form1"].elements[0].value;

document.forms[0].elements[0].value;

Используйте тот метод обращения к элементам формы, который вам больше нравится.

Следует помнить, что у объекта формы есть следующие свойства:

• length — количество элементов в форме;
• action — URL-адрес сценария, который будет обрабатывать форму;
• elements — ссылка на коллекцию elements;
• encoding — MIME-тип передаваемых данных;
• method — режим пересылки данных формы программе, которая задана в action;
• enctype — метод кодирования данных формы;
• name — имя формы;
• target — имя фрейма, в который будет загружен документ.

Объект формы поддерживает всего два метода: submit() и reset(). Первый метод инициирует отправку формы на веб-сервер, второй — сбрасывает форму. Соответственно, есть два событий — onsumbit и onreset. Первое происходит при отправке данных формы, второе — при сбросе формы.

Получение данных из поля ввода

Сейчас мы поговорим о двух элементах формы — текстовом поле и поле для ввода пароля, которые создаются с помощью следующего HTML-кода:

<input type="text">

<input type="password">

У этих элементов формы одинаковые свойства, методы и события. Сначала рассмотрим свойства:

• Value — значение элемента формы.
• defaultValue — начальное значение, задаваемое параметром value.
• Disabled — если true, то поле является неактивным.
• Form — ссылка на форму.
• maxLength — максимальное количество символов, которое можно ввести в поле.
• Name — имя элемента.
• readOnly — если это свойство равно true, то поле нельзя редактировать, если false, то можно.
• Type — тип элемента формы.

Методы полей ввода текста и пароля:

• blur() - убирает фокус с текущего элемента формы. При потере фокуса происходит событие onblur.
• focus() - помещает фокус на текущий элемент формы. При получении фокуса определённым элементом формы происходит событие onfocus. Событие onchange происходит при получении и изменении фокуса, изменении данных в поле или при отправке данных формы.
• select() - выделяет текст в поле.

Работа с textarea.

В отличие от обычного поля ввода текста поле textarea позволяет вводить многострочный текст. Свойства, методы и события textarea такие же, как у поля ввода. Однако у textarea нет свойства maxLength, зато есть свойство wrap, задающее режим переноса слов. Это свойство может принимать следующее значение:

• off — слова переноситься не будут.
• physical — слова переносятся как на экране, так и при передаче данных.
• virtual — слова переносятся только на экране, но не при передаче данных.