Form collection in html

.forms

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

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

Кратко

Скопировать ссылку «Кратко» Скопировано

forms — это поле объекта document . Оно хранит коллекцию всех элементов , которые есть на текущей странице.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызывается обращением к свойству объекта 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>    Скопировать Скопировано Не удалось скопировать   

При обращении к свойству 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 // По id:document.forms['loginFormId']document.forms.loginFormId // По индексу:document.forms[2] // По имени: document.forms['loginFormName'] document.forms.loginFormName // По id: document.forms['loginFormId'] document.forms.loginFormId // По индексу: document.forms[2]    Скопировать Скопировано Не удалось скопировать   

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

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

По аналогии со свойством length у массивов, можно получить общее количество форм на странице, запросив значение длины коллекции:

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

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

Скопировать ссылку «Взаимодействие с полями» Скопировано

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

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

 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-элементом формы, запрошенным по селектору.

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Так как свойство 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    Скопировать Скопировано Не удалось скопировать   

Источник

HTML DOM forms collection

The HTML DOM forms collection is used for returning all the form elements that are present inside the HTML document as a collection. The elements present in the collection are sorted and are presented in the same order as they appear in the HTML document.

Properties

Following are the properties for forms collection −

Property	Description
length	It is a read-only property returning the number of elements in the collection.

Methods

Following are the methods for forms collection −

Method	Description
[index]	To return the element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of bound.
item(index)	To return the element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of range.
namedItem(id)	To return the element from the collection with the given id. Null is returned if the id doesn’t exist.

Syntax

Following is the syntax for HTML DOM forms collection −

Example

Let us look at an example of the HTML DOM forms collection −

      
Forms collection example
 
GET IDS  

Output

This will produce the following output −

On clicking the GET IDS button −

We have first created three forms with id “FORM1”,”FORM2” and “FORM3” respectively. The first two forms have an input element with type text and the third form having the input element with type password −

The GET IDS button execute the formCollect() method when clicked by the user −

The formCollect() method gets the document.forms length property values which in our case is 3 and use it in the test expression inside the for loop. Using the index number on form collection we get their id and append it to the paragraph with id “Sample” for displaying −

function formCollect() < for(var i=0;i"; document.getElementById("Sample").innerHTML +=no; > >

Источник

HTML DOM Document forms

The forms property returns a collection of all elements in a document.

The forms property returns an HTMLCollection.

The forms property is read-only.

See Also:

Tip:

Use the Forms elements Collection to return all elements in a form.

HTMLCollection

An HTMLCollection is an array-like collection (list) of HTML elements.

The elements in a collection can be accessed by index (starts at 0).

The length Property returns the number of elements in the collection.

Syntax

Properties

Methods

Method	Description
[index]	Returns the element with the specified index (starts at 0). Returns null if the index is out of range.
item(index)	Returns the element with the specified index (starts at 0). Returns null if the index is out of range.
namedItem(id)	Returns the element with the specified id. Returns null if the id does not exist.

Return Value

More Examples

Loop through all elements and output the id of each form:

Using the form.elements collection to get the value of each element in the form:

const form = document.forms[0];
let text = «»;
for (let i = 0; i < form.length; i++) text += forms.elements[i].value + "
«;
>

Browser Support

document.forms is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Form Object

You can access a element by using getElementById():

Example

Tip: You can also access a element by using the forms collection.

Create a Form Object

You can create a element by using the document.createElement() method:

Example

Form Object Collections

Form Object Properties

Property	Description
acceptCharset	Sets or returns the value of the accept-charset attribute in a form
action	Sets or returns the value of the action attribute in a form
autocomplete	Sets or returns the value of the autocomplete attribute in a form
encoding	Alias of enctype
enctype	Sets or returns the value of the enctype attribute in a form
length	Returns the number of elements in a form
method	Sets or returns the value of the method attribute in a form
name	Sets or returns the value of the name attribute in a form
noValidate	Sets or returns whether the form-data should be validated or not, on submission
target	Sets or returns the value of the target attribute in a form

Form Object Methods

Standard Properties and Events

The Form object also supports the standard properties and events.

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник