Document forms javascript: Document.forms — Web APIs | MDN
Содержание
.forms — JavaScript — Дока
Кратко
Секция статьи «Кратко»
forms — это поле объекта document. Оно хранит коллекцию всех элементов <form>, которые есть на текущей странице.
Коллекция доступна только для чтения.
Как пишется
Секция статьи «Как пишется»
Вызывается обращением к свойству объекта document. Так можно получить коллекцию всех форм:
const collection = document.forms
const collection = document.forms
Как пользоваться
Секция статьи «Как пользоваться»
Для примера создадим три формы на одной странице: форму для применения промокода, форму с полем для подписки на рассылку, и форму авторизации с помощью номера телефона.
<form> <label for="promocode">Промокод</label> <input type="text" name="promocode" placeholder="WIN-1234" required> <button type="submit">Применить</button></form>...<form> <label for="email">Почта</label> <input type="email" name="email" placeholder="email@example.com" required> <button type="submit">Подписаться</button></form>...<form name="loginFormName"> <label for="phone">Ваш номер</label> <input type="tel" name="phone" placeholder="776-2323" required> <button type="submit">Отправить код подтверждения</button></form>
<form> <label for="promocode">Промокод</label> <input type="text" name="promocode" placeholder="WIN-1234" required> <button type="submit">Применить</button> </form> ... <form> <label for="email">Почта</label> <input type="email" name="email" placeholder="[email protected]" required> <button type="submit">Подписаться</button> </form> ... <form name="loginFormName"> <label for="phone">Ваш номер</label> <input type="tel" name="phone" placeholder="776-2323" required> <button type="submit">Отправить код подтверждения</button> </form>
com" required> <button type="submit">Подписаться</button></form>...<form name="loginFormName"> <label for="phone">Ваш номер</label> <input 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.// По имени: document.forms['loginFormName'] document.forms.loginFormName // По id: document.forms['loginFormId'] document.forms.loginFormId // По индексу: document.forms[2]
forms['loginFormName']document.forms.loginFormName// По id:document.forms['loginFormId']document.forms.loginFormId// По индексу:document.forms[2]
Атрибуты имени и идентификатора не конфликтуют, позволяя обращаться к форме и так, и так.
В случае, если элементов <form> на странице нет, коллекция будет доступной, но пустой. Её длина будет равна нулю.
💡
По аналогии со свойством length у массивов, можно получить общее количество форм на странице, запросив значение длины коллекции:
document.forms.length
document.forms.length
Взаимодействие с полями
Секция статьи «Взаимодействие с полями»
Элементы коллекции document имеют тип HTML и фактически являются ссылками на соответствующие элементы форм на странице.
Например, чтобы получить номер телефона в форме логина, мы напишем:
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 или использовать цикл for:
Array.from(document.forms).Array.from(document.forms).forEach((form) => { console.log(form) }) for (const form of document.forms) { console.log(form) }
forEach((form) => { console.log(form)})for (const form of document.forms) { console.log(form)}
🛠 Формы, которым задан атрибут name, также попадают и в сам объект document. К ним можно обращаться напрямую, в обход коллекции document:
document.myFormName
document.myFormName
HTML DOM Document Forms Коллекция
❮ Предыдущая
❮ Ссылка на объект документа
Далее ❯
Пример
Количество элементов