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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/html_dom_api/index.md)

Свойство 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