HTMLFormElement: свойство elements

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

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

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

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

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

Значение

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

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

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

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

Примеры

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

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

html

<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> (en-US), чтобы обработать их.

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", "");
}

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

Specification
HTML Standard # dom-form-elements-dev

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

BCD tables only load in the browser