HTMLFormElement: свойство elements

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

Отдельно вы можете получить просто количество элементов управления формой, используя свойство 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> типа "text", чтобы можно было выполнить некоторую обработку.

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}