How to work with forms in javascript

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

Popular Posts

My most popular posts

Maximum productivity on remote job
Business

Maximum productivity on remote job

I started my own business and intentionally did my best to work from anywhere in the world. Sometimes I sit with my office with a large 27-inch monitor in my apartment in Cheboksary. Sometimes I’m in the office or in some cafe in another city.

Hello! I am Sergey Emelyanov and I am hardworker
Business PHP

Hello! I am Sergey Emelyanov and I am hardworker

I am a programmer. I am an entrepreneur in my heart. I started making money from the age of 11, in the harsh 90s, handing over glassware to a local store and exchanging it for sweets. I earned so much that was enough for various snacks.

Hire Professional CRM developer for $25 per hour

I will make time for your project. Knowledge of Vtiger CRM, SuiteCRM, Laravel, and Vue.js. I offer cooperation options that will help you take advantage of external experience, optimize costs and reduce risks. Full transparency of all stages of work and accounting for time costs. Pay only development working hours after accepting the task. Accept PayPal and Payoneer payment systems. How to hire professional developer? Just fill in the form

Telegram
@sergeyem
Telephone
+4915211100235