JavaScriptのelementsとは？フォーム内のエレメント参照方法を初心者向けに解説

form.elements は、フォーム内に含まれるすべてのエレメント（input・select・textarea など）を配列として扱うためのプロパティです。
エレメント名やインデックス番号でアクセスでき、フォーム操作の基本となる重要な仕組みです。

elementsオブジェクトとは？

フォーム内の各部品（エレメント）は form.elements に格納されています。
エレメントは次の2つの方法で参照できます。

• エレメント名（name属性）で参照
• インデックス番号（elements[番号]）で参照

1. エレメント名で参照する

エレメント名は、<input> や <select> などの name 属性で指定されます。

このエレメントを参照するには次のように書きます。

2. インデックス番号で参照する

フォーム内のエレメントは、記述順に 0 からの連番で格納されています。

→ フォーム内で 2 番目のエレメントを参照します。

lengthプロパティ：エレメントの総数を取得

form.length と form.elements.length は同じ値を返し、
フォーム内にあるエレメントの総数を取得できます。

typeプロパティ：エレメントの種類を取得

element.type を使うと、そのエレメントがどの種類かを取得できます。

エレメント	意味	エレメント	意味
button	ボタン	radio	ラジオボタン
checkbox	チェックボックス	reset	リセットボタン
fileUpload	ファイル選択	select	選択メニュー
hidden	非表示フィールド	submit	送信ボタン
options	選択肢（option）	text	1行テキスト入力
password	パスワード入力	textarea	複数行テキスト入力

→ 入力チェックや動的フォーム操作でよく使われます。

まとめ

• form.elements はフォーム内のエレメントを配列として扱うプロパティ
• エレメント名またはインデックス番号で参照可能
• elements.length でエレメント総数を取得
• element.type でエレメントの種類を判別できる
• フォーム操作の基礎として非常に重要

関連リンク

• Formオブジェクトの基本（forms / forms.length）
• form.target（送信先ウィンドウの指定）
• form.action（送信先URLの設定）