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 ⁨2015年7月⁩.

HTMLFormElement のelements プロパティは、HTMLFormControlsCollection で<form> 要素に含まれているすべてのフォームコントロールを列挙して返します。

これとは別に、length プロパティを使用してフォームコントロールの数だけを取得することができます。

返された集合の中の特定のフォームコントロールにアクセスするには、添字か要素のname またはid 属性のいずれかを使用します。

HTML 5 より前のバージョンでは、返されるオブジェクトはHTMLCollection でした。HTMLFormControlsCollection これに基づいています。

メモ:同様に、指定された文書内のすべてのフォームの一覧を取得するには、その文書のforms プロパティを使用してください。

値

フォームに含まれるすべての非画像コントロールが入ったHTMLFormControlsCollection です。これは生きた集合です。フォームコントロールがフォームに追加されたりフォームから削除されたりすると、この集合はその変更を反映するために更新されます。

返されたコレクション内のフォームコントロールは、ツリーの前順、深さ優先の順序に従うことで、フォームに現れるのと同じ順序になります。これは、ツリー順と呼ばれます。

以下の要素のみが返されます。

<button>
<fieldset>
<input> （ただし、type が"image" であるものは、過去の経緯から除外されています）。
<object>
<output>
<select>
<textarea>

例

構文の例

この例では、フォームコントロールの一覧を取得する方法と、添字と名前または ID でそのメンバーにアクセスする方法について説明します。

html

<form>  <label>    ユーザー名:    <input type="text" name="username" />  </label>  <label>    フルネーム:    <input type="text" name="full-name" />  </label>  <label>    パスワード:    <input type="password" name="password" />  </label></form>

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

フォームコントロールへのアクセス

この例では、フォームの要素リストを取得し、そのリストを反復処理して、何らかの処理を行えるように"text" 型の<input> 要素を探すものです。

const inputs = document.getElementById("my-form").elements;// Iterate over the form controlsfor (let i = 0; i < inputs.length; i++) {  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {    // Update text input    inputs[i].value.toLocaleUpperCase();  }}

フォームの無効化

const inputs = document.getElementById("my-form").elements;// Iterate over the form controlsfor (let i = 0; i < inputs.length; i++) {  // Disable all form controls  inputs[i].setAttribute("disabled", "");}