この記事で分かること
Formオブジェクトとは何かdocument.forms配列の役割と使い方- フォームを名前・番号で参照する方法
- フォーム総数の取得方法（
forms.length） form.nameや DOM での参照方法の違い
JavaScript では、Form オブジェクトを使ってフォームを参照・操作できます。
ページ内のフォームは document.forms に配列として格納されており、
フォーム名 や インデックス番号 を使って簡単にアクセスできます。
複数フォームを扱うページでは必須の知識なので、しっかり理解しておきましょう。
フォームを参照する方法
フォームは次の2つの方法で参照できます。
- フォーム名で参照
forms[番号] で参照
1. フォーム名で参照する
フォーム名は <form> タグの
name 属性または id 属性で指定されます。
<form name="enqForm">
このフォームを参照するには次のように書きます。
document.enqForm;
document.forms["enqForm"];
→ name 属性を使った参照は、古いコードでもよく見られます。
2. インデックス番号で参照する
フォームは document.forms 配列に格納されており、
0 から始まる番号でアクセスできます。
document.forms[1];
→ ドキュメント内で 2 番目に記述されたフォームを参照します。
forms.length：フォームの総数を取得
document.forms.length は、ページ内に存在するフォームの総数を返します。
複数フォームを扱うページで、ループ処理を行う際に便利です。
// フォームの総数をダイアログ表示
alert("このドキュメントに含まれるフォームの数：" + document.forms.length);
name プロパティ：フォーム名を取得
フォームの name プロパティを使うと、そのフォーム名を取得できます。
// 2番目のフォームの名前を取得
let fName = document.forms[1].name;
→ フォーム名を変数 fName に代入します。
DOMでフォームを参照する場合
id 属性が付いているフォームは、通常の DOM と同じように参照できます。
document.getElementById("enqForm");
→ <form id="enqForm"> を参照します。
実践例：複数フォームをまとめて処理する
document.forms は配列のように扱えるため、
複数フォームをループで処理することもできます。
for (let f of document.forms) {
console.log("フォーム名:", f.name);
}
→ フォーム名を一覧で取得できます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム操作や DOM の基礎を順序立てて理解したい
Form オブジェクトや document.forms の仕組みは、
「フォーム送信」「入力チェック」「UI 制御」など実務で頻出の重要知識です。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
フォーム操作・イベント処理・DOM の基礎が丁寧に解説されており、
Form オブジェクトの理解にもつながります。
この本で解決できること：
- フォームと入力欄の仕組みを視覚的に理解できる
- DOM を使ったフォーム参照方法が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
フォーム参照・フォーム送信・バリデーションなど、実務で必要なフォーム操作の基礎力が身につきます。
この本で解決できること：
Formオブジェクトの動作原理を体系的に理解できるdocument.formsを使った複数フォームの扱い方が分かる- 実務で使えるフォーム処理の書き方が学べる
動画で理解を深めたい方へ（Udemy講座）
Form オブジェクトや document.forms の扱いは、
「フォーム送信」「入力チェック」「UI 制御」など実務で頻繁に登場します。
動画で DOM の動きやフォーム操作を視覚的に確認できる Udemy は、理解が一気に深まります。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
フォーム操作・イベント処理・DOM の基礎が丁寧に解説されており、
Form オブジェクトの理解にも役立ちます。
この講座で解決できること：
- フォーム参照（
name/id/forms配列）の仕組みを理解できる - DOM を使ったフォーム操作の流れが分かる
- 初心者がつまずきやすいフォーム処理を丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム操作を含む DOM 制御を深く理解したい方に最適です。
この講座で解決できること：
document.formsを使った複数フォームの扱い方が身につく- フォーム送信・バリデーションなど実務的な処理を学べる
- 現代的な DOM 操作をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- フォーム参照（
name/id/forms配列）が曖昧なまま進んでしまう - フォーム送信・バリデーションの設計が難しい
- 複数フォームを扱うコードの書き方が分からない
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
Form オブジェクトや DOM を使ったフォーム操作の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすいフォーム処理のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
Form オブジェクトに関するよくある質問（FAQ）
name と id のどちらを使うべき？
現代の開発では id を使うのが一般的です。name は古いコードでよく使われます。
forms 配列はライブコレクション？
はい。フォームが追加・削除されると自動で反映されます。
querySelector との違いは？
querySelector は CSS セレクタで検索、forms はフォーム専用の配列です。
フォームを動的に追加した場合は？
document.forms に自動で追加されます。
まとめ
document.formsはフォームを配列として扱えるforms[番号]またはforms["名前"]で参照可能forms.lengthでフォーム総数を取得form.nameでフォーム名を取得getElementById()でも参照できる
