HTML DOM フォームコレクション（document.forms）の使い方を徹底解説
HTML DOM のフォームコレクション（document.forms）は、HTML ドキュメント内に存在するすべての <form> 要素をコレクションとして取得するための機能です。コレクション内の要素は、HTML ドキュメント上に出現する順序と同じ順番で並べられます。
フォームコレクションのプロパティ
フォームコレクションには、以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| length | 読み取り専用のプロパティで、コレクションに含まれる <form> 要素の数を返します。 |
フォームコレクションのメソッド
フォームコレクションでは、以下のメソッドを使用できます。
| メソッド | 説明 |
|---|---|
| [index] | 指定したインデックス位置にある <form> 要素を返します。インデックスは 0 から始まり、範囲外のインデックスを指定した場合は null が返されます。 |
| item(index) | 指定したインデックス位置にある <form> 要素を返します。インデックスは 0 から始まり、範囲外の場合は null が返されます。 |
| namedItem(id) | 指定した id を持つ <form> 要素を返します。該当する id が存在しない場合は null が返されます。 |
構文
HTML DOM フォームコレクションの基本的な構文は次のとおりです。
document.forms
使用例
ここで、フォームコレクションの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<script>
function formCollect() {
for(var i=0;i<document.forms.length;i++){
var no=document.forms[i].id+"<br>";
document.getElementById("Sample").innerHTML +=no;
}
}
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>
実行結果
このコードを実行すると、まず次のような画面が表示されます。
「GET IDS」ボタンをクリックすると、以下のように各フォームの id が表示されます。
コードの解説
この例では、まず「FORM1」「FORM2」「FORM3」という id を持つ 3 つのフォームを作成しています。最初の 2 つのフォームには type="text" の入力要素が、3 つ目のフォームには type="password" の入力要素が含まれています。
<form id="FORM1"> Fruit <input type="text" name="fname" value="Mango" > </form> <form id="FORM2"> Age <input type="text" name="Age" value="22" > </form> <form id="FORM3"> Password: <input type="password" name="pass" value="test"> </form>
「GET IDS」ボタンは、ユーザーがクリックすると formCollect() 関数を実行します。
<button onclick="formCollect()">GET IDS</button>
formCollect() 関数では、document.forms.length プロパティの値（この例では 3）を取得し、for ループの条件式として使用しています。ループ内では、インデックス番号を使ってコレクションから各フォームを取り出し、その id を取得して、id が「Sample」である段落要素に追加表示していきます。
function formCollect() {
for(var i=0;i<document.forms.length;i++){
var no=document.forms[i].id+"<br>";
document.getElementById("Sample").innerHTML +=no;
}
}
このように、document.forms コレクションを活用することで、ページ内のすべてのフォームに対して効率的にアクセスし、一括処理を行うことができます。
-
HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説
Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f
-
HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説
HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要