JavaScriptのFormオブジェクトとは？forms配列・フォーム名の参照方法を初心者向けに解説
JavaScript では、Form オブジェクトを使ってフォームを参照・操作できます。
フォーム名や forms 配列を利用することで、複数のフォームを簡単に扱うことができます。
フォームを参照する方法
フォームは次の2つの方法で参照できます。
- フォーム名で参照
- forms[番号] で参照
1. フォーム名で参照する
フォーム名は <form> タグの name 属性または id 属性で指定されます。
<form name=”enqForm”>
このフォームを参照するには次のように書きます。
document.enqForm;
document.forms[“enqForm”];
document.forms[“enqForm”];
2. 参照番号（インデックス）で参照する
フォームは document.forms 配列に格納されており、0 から始まる番号でアクセスできます。
document.forms[1];
→ ドキュメント内で 2 番目に記述されたフォームを参照します。
forms.length：フォームの総数を取得
document.forms.length は、ページ内に存在するフォームの総数を返します。
// フォームの総数をダイアログ表示
alert(“このドキュメントに含まれるフォームの数：” + document.forms.length);
alert(“このドキュメントに含まれるフォームの数：” + document.forms.length);
nameプロパティ：フォーム名を取得
フォームの name プロパティを使うと、そのフォーム名を取得できます。
// 2番目のフォームの名前を取得
let fName = document.forms[1].name;
let fName = document.forms[1].name;
→ フォーム名を変数 fName に代入します。
DOMでフォームを参照する場合
id 属性が付いているフォームは、通常の DOM と同じように参照できます。
document.getElementById(“enqForm”);
→ <form id=”enqForm”> を参照します。
まとめ
document.formsはフォームを配列として扱えるforms[番号]またはforms["名前"]で参照可能forms.lengthでフォーム総数を取得form.nameでフォーム名を取得getElementById()でも参照できる
