HTMLFormElement: свойство elements

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

Значение

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

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

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

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

Примеры

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

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

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

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