Работаем с формами в Javascript

Работаем с формами в Javascript

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

Представим, что в нашем документе есть форма 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 — слова переносятся только на экране, но не при передаче данных.