HTMLFormElement: свойство elements

Свойство elements интерфейса HTMLFormElement возвращает список HTMLFormControlsCollection, содержащий все элементы управления <form>.

Для получения только количества элементов управления формы можно использовать свойство HTMLFormElement.length.

Для получения доступа к определенному элементу управления в возвращаемой коллекции используйте индекс или атрибуты name и id.

До HTML 5 возвращаемым объектом был HTMLCollection, на котором основан HTMLFormControlsCollection.

Значение

HTMLFormControlsCollection, которое содержит все элементы управления, не являющиеся изображениями. Это «живой» список, если у формы добавляются или удаляются элементы, то список обновляется.

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

Возвращаются только следующе элементы:

• <button>
• <fieldset>
• <input> (за исключением элементов, у которых атрибут type равен "image", по историческим причинам)
• <object>
• <output>
• <select>
• <textarea>

Примеры

Простой пример синтаксиса

В этом примере мы получаем список элементов управления формы, а также доступ к его членам по индексу, имени или идентификатору.

<form id="my-form">
 <label>
 Username:
 <input type="text" name="username" />
 </label>
 <label>
 Full name:
 <input type="text" name="full-name" />
 </label>
 <label>
 Password:
 <input type="password" name="password" />
 </label>
</form>

const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

Доступ к элементам управления

В этом примере мы получаем список элементов формы, а затем выполняем поиск элементов <input> c типом <input/text>, чтобы обработать их.

const inputs = document.getElementById("my-form").elements;
// Получаем элементы формы
for (let i = 0; i < inputs.length; i++) {
 if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
 // Изменяем значение
 inputs[i].value.toLocaleUpperCase();
 }
}

Отключение элементов управления

const inputs = document.getElementById("my-form").elements;
// Получаем элементы формы
for (let i = 0; i < inputs.length; i++) {
 // Отключаем все элементы формы
 inputs[i].setAttribute("disabled", "");
}

Спецификации

Совместимость с браузерами