.forms

forms — это поле объекта 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При обращении к свойству 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. В любой момент, из любого нашего скрипта, независимо от контекста.

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

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

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

        
          
          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)
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          document.myFormName
          document.myFormName

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать