Свойство forms

Возвращает живую коллекцию всех форм, которые есть на странице

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Поле объекта document, которое хранит коллекцию всех элементов <form> содержащихся на текущей странице.

Коллекция доступна только для чтения.

Как пишется

Секция статьи "Как пишется"

Вызывается обращением к полю объекта document. Например, вот так можно получить коллекцию всех форм:

        
          
          const collection = document.forms
          const collection = document.forms

        
        
          
        
      

Как пользоваться

Секция статьи "Как пользоваться"

Для примера создадим три формы на одной странице: форму для применения промокода, поле для подписки на рассылку, и авторизация с помощью номера телефона.

        
          
          <form>  <label for="promocode">Промокод</label>  <input id="promocode" type="text" name="promocode" placeholder="WIN-1234" required>  <button type="submit">Применить</button></form>...<form id="subscriptionFormId">  <label for="email">Почта</label>  <input id="email" type="email" name="email" placeholder="email@example.com" required>  <button type="submit">Подписаться</button></form>...<form id="loginFormId" name="loginFormName">  <label for="phone">Ваш номер</label>  <input id="phone" type="tel" name="phone" placeholder="776-2323" required>  <button type="submit">Отправить код подтверждения</button></form>
          <form>
  <label for="promocode">Промокод</label>
  <input id="promocode" type="text" name="promocode" placeholder="WIN-1234" required>
  <button type="submit">Применить</button>
</form>
...
<form id="subscriptionFormId">
  <label for="email">Почта</label>
  <input id="email" type="email" name="email" placeholder="email@example.com" required>
  <button type="submit">Подписаться</button>
</form>
...
<form id="loginFormId" name="loginFormName">
  <label for="phone">Ваш номер</label>
  <input id="phone" type="tel" name="phone" placeholder="776-2323" required>
  <button type="submit">Отправить код подтверждения</button>
</form>

        
        
          
        
      

При обращении к полю document.forms, мы получим живую коллекцию HTMLCollection, которая очень напоминает массив, но позволяет также обращаться к элементам по их имени или идентификатору.

Формы, у которых указаны атрибуты id или name, можно получить по значениям этих атрибутов. В остальных случаях, получить форму можно по индексу, который совпадает с порядком описания форм на странице.

Доступ к формам

Секция статьи "Доступ к формам"

Первая форма в примере выше не имеет атрибутов. Единственный способ обращения к ней — через её индекс в коллекции:

        
          
          document.forms[0]
          document.forms[0]

        
        
          
        
      

У второй формы проставлен атрибут id, а значит обращаться можно и по значению атрибута, и по индексу:

        
          
          document.forms['subscriptionFormId']document.forms.subscriptionFormIddocument.forms[1]
          document.forms['subscriptionFormId']
document.forms.subscriptionFormId
document.forms[1]

        
        
          
        
      

Третья форма содержит как атрибут id, так и name. У нас появляется возможность получить форму ещё и по имени, указанному в атрибуте name:

        
          
          // по имениdocument.forms['loginFormName']document.forms.loginFormName// по iddocument.forms['loginFormId']document.forms.loginFormId// по индексуdocument.forms[2]
          // по имени
document.forms['loginFormName']
document.forms.loginFormName

// по id
document.forms['loginFormId']
document.forms.loginFormId

// по индексу
document.forms[2]

        
        
          
        
      

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

В случае, если элементов <form> на странице нет, коллекция будет доступной, но пустой. Её длина будет равна нулю.

Взаимодействие с полями

Секция статьи "Взаимодействие с полями"

Элементы коллекции document.forms имеют тип HTMLFormElement и фактически являются ссылками на соответствующие элементы форм на странице.

Например, чтобы получить номер телефона в форме логина, мы напишем:

        
          
          const phone = document.forms.loginFormName.phone.value
          const phone = document.forms.loginFormName.phone.value

        
        
          
        
      

Выключим кнопку отправки для промокода:

        
          
          document.forms[0].querySelector('[type="submit"]').disabled = true
          document.forms[0].querySelector('[type="submit"]').disabled = true

        
        
          
        
      

Или даже вызовем интерактивную валидацию формы подписки:

        
          
          document.forms.subscriptionFormId.reportValidity()
          document.forms.subscriptionFormId.reportValidity()

        
        
          
        
      

Другими словами, работа с формой и её полями в данном случае ничем не отличается, от взаимодействия с «DOM-элементом» формы полученным по селектору.

Читайте подробнее об этом в статье «Работа с формами»

Как это понять

Секция статьи "Как это понять"

Все элементы <form> на странице отслеживаются браузером в реальном времени и доступны в специальном поле объекта document. В любой момент, из любого нашего скрипта, независимо от контекста.

Благодаря чему мы получаем ещё один вариант взаимодействия с формами в обход использования любых селекторов.

Так как свойство form возвращает коллекцию, то можно пройтись по всех формах циклом. Это может быть полезно для глобальных операций на странице. Например, для сбора аналитики или отключения отправки форм из-за потери связи с сервером.

Ещё один плюсик в копилку использования тэга <form> 🙂

На практике

Секция статьи "На практике"

Владислав Чичужко

Секция статьи "Владислав Чичужко"

🛠 По коллекции можно пройтись методами предусмотренными для массивов, но сперва необходимо обвернуть её в метод Array.from() или использовать цикл for...of:

        
          
          Array.from(document.forms).forEach((form) => {  console.log(form)})for (const form of document.forms) {  console.log(form)}
          Array.from(document.forms).forEach((form) => {
  console.log(form)
})

for (const form of document.forms) {
  console.log(form)
}

        
        
          
        
      

🛠 Формы, которым указан атрибут name, также попадают и в сам объект document. К ним можно обращаться напрямую, в обход коллекции document.forms:

        
          
          document.myFormName
          document.myFormName