JavaScriptにおけるDocument.formsの便利な使い方10選

●Document.formsとは

皆さんは、JavaScriptを使ってWebサイトやアプリケーションを開発する際に、HTMLフォームを操作する機会が多いのではないでしょうか。

フォームの値を取得したり、設定したり、フォームを送信したりする処理は、Webアプリケーションでは欠かせません。

そこで、今回はJavaScriptのDocument.formsを使ったフォーム操作の方法について、詳しく解説していきたいと思います。

Document.formsは、HTMLドキュメント内のすべてのフォームにアクセスするための便利なプロパティです。

これを使うことで、フォームの取得や値の操作、送信などが簡単にできるようになります。

プロのエンジニアの方はもちろん、JavaScriptを学び始めたばかりの初心者の方にも、わかりやすく丁寧に説明していきますので、ぜひ最後までお付き合いください。

Document.formsを使いこなせるようになれば、よりインタラクティブで使いやすいWebアプリケーションを開発できるようになるはずです。

では早速、Document.formsの基本的な使い方から見ていきましょう。

○document.formsの基本的な使い方

Document.formsは、HTMLドキュメント内のすべてのフォーム（要素）を含むHTMLCollectionを返します。

これを使うことで、ドキュメント内の特定のフォームにアクセスしたり、フォームの要素を操作したりできます。

Document.formsの基本的な構文は次のようになります。

document.forms[index]
document.forms[name]
document.forms.name

indexは、ドキュメント内のフォームのインデックス（0から始まる数値）、nameはフォームのname属性の値を表します。

また、document.forms.nameのように、nameプロパティを使ってフォームにアクセスすることもできます。

実際に、サンプルコードを見ながら使い方を確認してみましょう。

○サンプルコード1：フォームの取得

次のようなHTMLがあるとします。

<form name="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

このフォームをJavaScriptで取得するには、次のようにします。

// インデックスでフォームを取得
const form1 = document.forms[0];

// name属性でフォームを取得
const form2 = document.forms["myForm"];
const form3 = document.forms.myForm;

これらのコードを実行すると、form1、form2、form3はすべて同じフォーム要素を参照します。

インデックスやname属性を使って、目的のフォームを簡単に取得できるのがわかりますね。

○サンプルコード2：フォームの値の取得

フォームを取得したら、次はフォーム内の各要素の値を取得してみましょう。

先ほどのHTMLを使って、次のようにフォームの値を取得できます。

const form = document.forms.myForm;
const username = form.username.value;
const password = form.password.value;

console.log(username); // 入力されたユーザー名
console.log(password); // 入力されたパスワード

このコードでは、myFormという名前のフォームを取得し、その中のusernameとpasswordという名前の入力欄の値をそれぞれ取得しています。

フォーム要素のname属性を使って、各入力欄にアクセスしているのがポイントです。

実行結果を見ると、フォームに入力されたユーザー名とパスワードがそれぞれコンソールに出力されているはずです。

このように、Document.formsとname属性を使えば、フォームの値を簡単に取得できます。

●フォームの値の設定

フォームの値を取得できるようになったら、次は逆にJavaScriptからフォームの値を設定してみましょう。

ユーザーがフォームに入力する前に、あらかじめ何らかの値を設定しておきたい場面もあるでしょう。

例えば、ユーザー登録フォームで、ユーザー名の入力欄にデフォルト値として”ゲスト”と表示しておくことで、ユーザーの利便性を高められます。

あるいは、問い合わせフォームで、過去に入力した内容を再度表示することで、ユーザーの手間を減らせるかもしれません。

Document.formsを使えば、このようなフォームの値の設定も簡単に行えます。

HTMLの各フォーム要素に対応するJavaScriptのプロパティを使って、値を設定するだけです。

それでは実際に、サンプルコードを見ながらフォームの値の設定方法を確認していきましょう。

○サンプルコード3：テキスト入力欄の値の設定

まずは、もっともシンプルなテキスト入力欄（）の値を設定する方法です。

<form name="myForm">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

このフォームに対して、JavaScriptで以下のようにusername欄の値を設定できます。

document.forms.myForm.username.value = "John Doe";

これを実行すると、フォームのusername欄に”John Doe”という値が設定されます。

フォームが表示された時点で、すでにこの値が入力されている状態になるわけです。

○サンプルコード4：チェックボックスの設定

次は、チェックボックス（）の設定です。

チェックボックスの場合、checked属性を使ってチェック状態を設定します。

<form name="myForm">
  <input type="checkbox" name="agree" value="yes">同意する
  <button type="submit">送信</button>
</form>

このチェックボックスに対して、次のようにchecked属性を設定できます。

document.forms.myForm.agree.checked = true;

これを実行すると、チェックボックスがチェック済みの状態で表示されます。

同意事項などのデフォルトでチェックしておきたい項目がある場合に便利ですね。

○サンプルコード5：ラジオボタンの設定

ラジオボタン（<input type=”radio”>）も、チェックボックスと同様にchecked属性を使って設定します。

<form name="myForm">
  <input type="radio" name="gender" value="male">男性
  <input type="radio" name="gender" value="female">女性
  <button type="submit">送信</button>
</form>

このラジオボタンに対して、次のようにchecked属性を設定できます。

document.forms.myForm.gender.value = "male";

これを実行すると、”男性”のラジオボタンが選択された状態で表示されます。

ユーザーの性別や年齢などのデフォルト値を設定する際に活用できそうです。

○サンプルコード6：セレクトボックスの設定

最後に、セレクトボックス（）の設定方法を見ていきましょう。

セレクトボックスでは、selectedIndex属性を使って選択状態を設定します。

<form name="myForm">
  <select name="fruit">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <button type="submit">送信</button>
</form>

このセレクトボックスに対して、次のようにselectedIndex属性を設定できます。

document.forms.myForm.fruit.selectedIndex = 1;

これを実行すると、2番目の選択肢である”バナナ”が選択された状態で表示されます。

selectedIndexは0から始まるインデックスなので、1を指定すると2番目の選択肢が選ばれるというわけです。

実行結果を見ると、フォームが表示された時点で、指定した値が設定されていることが確認できるはずです。

これで、フォームのデフォルト値を自在に設定できるようになりました。

●フォームの送信

さて、フォームの値の取得と設定ができるようになったら、いよいよフォームを送信する番です。

HTMLフォームの主な目的は、ユーザーが入力したデータをサーバーに送信することです。

通常、フォームの送信はsubmitボタンをクリックすることで行われます。

しかし、JavaScriptを使えば、submitボタンを使わずにフォームを送信することもできます。

これは、フォームのバリデーションを行ったり、Ajax通信でページ遷移なしにデータを送信したりする場合に便利です。

Document.formsを使ったフォーム送信には、大きく分けて2つの方法があります。

1つは、フォーム要素のsubmitメソッドを使う方法。もう1つは、JavaScriptから直接フォームを送信する方法です。

それぞれの方法について、サンプルコードを交えながら詳しく見ていきましょう。

フォーム送信の仕組みを理解することで、より高度なフォーム処理が実現できるようになります。

○サンプルコード7：submitメソッドでフォーム送信

まずは、フォーム要素のsubmitメソッドを使ったフォーム送信の方法です。

submitメソッドを呼び出すと、フォームが送信されます。

<form name="myForm" action="/submit" method="post">
  <input type="text" name="username">
  <button type="button" onclick="submitForm()">送信</button>
</form>

function submitForm() {
  document.forms.myForm.submit();
}

ここでは、送信ボタンをクリックすると、submitForm関数が呼び出されます。

この関数の中で、document.forms.myForm.submit()としてフォームのsubmitメソッドを呼び出しています。

実行結果を見ると、送信ボタンをクリックした時点で、フォームが送信されることが確認できるはずです。

フォームのaction属性で指定したURLに、フォームのデータがPOST送信されます。

このように、submitメソッドを使えば、JavaScriptからフォームを送信できます。

ただし、この方法では、フォームの送信先URLを変更したり、送信データを変更したりすることはできません。

その場合は、次に紹介するJavaScriptからの直接送信を使う必要があります。

○サンプルコード8：JavaScriptからフォーム送信

次に、JavaScriptを使ってフォームを直接送信する方法を見ていきましょう。

この方法では、フォーム要素のaction属性やmethod属性を動的に変更してから送信することができます。

<form name="myForm">
  <input type="text" name="username">
  <button type="button" onclick="submitForm()">送信</button>
</form>

function submitForm() {
  const form = document.forms.myForm;
  form.action = "/submit"; // 送信先URLを設定
  form.method = "post"; // 送信メソッドを設定
  form.submit();
}

ここでは、submitForm関数の中で、まずフォーム要素を取得しています。

そして、フォームのaction属性とmethod属性を動的に設定した上で、submit()メソッドを呼び出しています。

実行結果を見ると、送信ボタンをクリックした時点で、指定したURLにフォームがPOST送信されることが確認できるはずです。

このように、JavaScriptを使えば、フォームの送信先や送信メソッドを動的に制御できます。

これは、フォームのバリデーションを行ってからAjax通信で送信したり、条件によって送信先を切り替えたりする場合に活用できる技術です。

フォーム送信の自由度が増すことで、よりインタラクティブなフォーム処理が実現できるでしょう。

●よくあるエラーと対処法

Document.formsを使ったフォーム操作は、とても便利で強力な機能です。

しかし、実際にコードを書いていると、思わぬエラーに遭遇することがあります。

特に、初心者の方にありがちなのが、「フォームが見つからない」「フォーム要素のname属性がない」といったエラーです。

このエラーに遭遇すると、なかなかコードが動かなくて困ってしまいますよね。

ただ、こういったエラーは、ちょっとしたコツを掴めば、すぐに解決できます。

ここでは、Document.formsを使っていて、よく遭遇するエラーとその対処法を3つ紹介します。

これらのエラーを理解し、適切に対処できるようになれば、より円滑にフォーム操作のコーディングができるようになるでしょう。

実際のコード例を交えながら、一緒にエラー対処のコツを身につけていきましょう！

○エラー1：フォームが見つからない

まずは、「フォームが見つからない」エラーから見ていきましょう。

これは、document.formsでフォームを取得しようとしたときに、指定したフォームが存在しない場合に発生します。

const form = document.forms.myForm;
console.log(form); // => undefined

このコードを実行すると、myFormという名前のフォームが存在しないため、formはundefinedになります。

そして、form.submit()などとしてフォームを操作しようとすると、「Uncaught TypeError: Cannot read property ‘submit’ of undefined」というエラーが発生します。

このエラーを防ぐには、フォームの名前が正しいかどうかをよく確認することが大切です。

HTMLのフォームに、正しくname属性を設定しているか、スペルミスがないかなどをチェックしましょう。

<form name="myForm">
  ...
</form>

また、フォームが存在するかどうかを、if文でチェックしてから操作するのも良い方法です。

const form = document.forms.myForm;
if (form) {
  form.submit();
} else {
  console.error("フォームが見つかりません");
}

こうすることで、たとえフォームが見つからなくても、エラーを回避し、適切にエラー処理を行えます。

○エラー2：フォーム要素のname属性がない

次は、「フォーム要素のname属性がない」エラーについて見ていきます。

これは、フォーム内の要素を操作しようとしたときに、その要素にname属性が設定されていない場合に発生します。

<form name="myForm">
  <input type="text">
  <button type="button">送信</button>
</form>

const form = document.forms.myForm;
const username = form.username.value;
console.log(username); // => Uncaught TypeError: Cannot read property 'value' of undefined

このコードでは、テキスト入力欄にname属性が設定されていないため、form.username.valueとしたときに、usernameがundefinedになり、エラーが発生します。

このエラーを防ぐには、フォームの各要素に、適切なname属性を設定することが重要です。

<form name="myForm">
  <input type="text" name="username">
  <button type="button">送信</button>
</form>

また、フォーム要素が存在するかどうかを、if文でチェックしてから値を取得するのも良いでしょう。

const form = document.forms.myForm;
if (form.username) {
  const username = form.username.value;
  console.log(username);
} else {
  console.error("usernameフィールドが見つかりません");
}

このように、フォーム要素の存在チェックを行うことで、エラーを回避できます。

○エラー3：送信時のページ遷移を止めたい

最後は、「送信時のページ遷移を止めたい」というケースについてです。

これは、フォームの送信ボタンをクリックしたときに、ページが遷移してしまうのを防ぎたい場合によく遭遇します。

<form name="myForm">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

const form = document.forms.myForm;
form.onsubmit = function() {
  console.log("フォームが送信されました");
};

このコードでは、フォームの送信イベントをキャッチして、コンソールにログを出力しています。

しかし、送信ボタンをクリックすると、ログ出力後にページが遷移してしまい、その後の処理が実行されません。

これを防ぐには、イベントのpreventDefault()メソッドを使って、フォームの送信を中止します。

const form = document.forms.myForm;
form.onsubmit = function(event) {
  event.preventDefault();
  console.log("フォームが送信されました");
  // フォームの内容を使った処理をここに書く
};

こうすることで、フォームの送信はキャンセルされ、ページ遷移は起こりません。

そして、フォームの内容を使った処理を、submit後に自由に行えるようになります。

実行結果を見ると、送信ボタンをクリックしてもページ遷移は起こらず、コンソールにログが出力されるはずです。

このテクニックを使えば、フォームの送信をJavaScriptで自在にコントロールできます。

●Document.formsの応用例

さて、ここまでDocument.formsを使ったフォームの基本的な操作方法を方法を解説してきました。

値の取得や設定、フォームの送信など、一通りのテクニックは身についたのではないでしょうか。

でも、本当に使えるようになるには、もう一歩踏み込んだ応用力が必要です。

実際の開発では、もっと複雑で高度なフォーム操作が求められることも多いでしょう。

そこで、ここからはDocument.formsのさらなる応用例を2つ紹介します。

1つは「全フォームの一括リセット」、もう1つは「フォームのバリデーション」です。

全フォームの一括リセットは、ページ内の全てのフォームをまとめてリセットしたいときに便利です。

複数のフォームを個別にリセットするのは面倒ですからね。Document.formsを使えば、シンプルなコードで一括リセットが実現できます。

フォームのバリデーションは、ユーザーが入力した内容をチェックして、不正な値がないかを確認する処理のことです。

サーバーサイドのチェックと併せて、JavaScriptでもバリデーションを行うことで、より強固なフォームが作れます。

実際のコード例を見ながら、これらの応用テクニックを身につけていきましょう。

Document.formsを使いこなせば、フォーム操作の幅がグンと広がります。

きっとあなたのWebアプリケーション開発に役立つはずです！

○サンプルコード9：全フォームの一括リセット

まずは、全フォームの一括リセットから見ていきましょう。

次のようなHTMLがあるとします。

<form name="form1">
  <input type="text" name="username">
  <button type="reset">リセット</button>
</form>

<form name="form2">
  <input type="text" name="email">
  <button type="reset">リセット</button>
</form>

ここでは、2つのフォームがあり、それぞれにリセットボタンが付いています。

これらのフォームを、JavaScriptから一括でリセットしてみましょう。

function resetAllForms() {
  for (let i = 0; i < document.forms.length; i++) {
    document.forms[i].reset();
  }
}

このコードでは、document.formsを使ってページ内の全フォームを取得し、forループで1つずつリセットしています。

document.forms.lengthでフォームの数を取得し、document.forms[i].reset()で各フォームをリセットしているわけです。

実行結果を確認するには、次のようにresetAllForms関数を呼び出します。

resetAllForms();

これを実行すると、ページ内の全てのフォームがリセットされ、入力内容が消去されるはずです。

とてもシンプルですが、強力なテクニックですよね。

○サンプルコード10：フォームのバリデーション

次は、フォームのバリデーションを見ていきましょう。

ここでは、ユーザー名とメールアドレスの入力をチェックする例を紹介します。

<form name="myForm">
  <input type="text" name="username">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>

このフォームに対して、次のようなバリデーションを行います。

• ユーザー名は必須入力
• メールアドレスは必須入力で、正しいメールアドレス形式であること

では、実際のコードを見てみましょう。

const form = document.forms.myForm;
form.onsubmit = function(event) {
  event.preventDefault();

  const username = form.username.value;
  const email = form.email.value;

  if (username === "") {
    alert("ユーザー名を入力してください");
    return false;
  }

  if (email === "") {
    alert("メールアドレスを入力してください");
    return false;
  }

  if (!email.includes("@")) {
    alert("正しいメールアドレスを入力してください");
    return false;
  }

  form.submit();
};

このコードでは、まずフォームのsubmitイベントをキャッチし、preventDefault()でデフォルトの送信をキャンセルしています。

そして、form.username.valueとform.email.valueで、ユーザー名とメールアドレスの値を取得します。

取得した値に対して、if文でチェックを行います。

ユーザー名とメールアドレスが空文字列の場合は、alertでエラーメッセージを表示し、return falseでバリデーション失敗とします。

また、メールアドレスについては、includes(“@”)で@文字を含んでいるかをチェックし、メールアドレス形式の簡易的なバリデーションを行っています。

全てのチェックをパスしたら、最後にform.submit()でフォームを送信します。

実行結果を確認するには、フォームを送信してみましょう。

• ユーザー名やメールアドレスが空の状態で送信すると、エラーメッセージが表示される
• メールアドレスに@が含まれていない状態で送信すると、エラーメッセージが表示される
• 全てのチェックをパスすると、フォームが送信される

このように、Document.formsとJavaScriptを活用することで、フォームのバリデーションも簡単に実装できます。

ユーザーの入力ミスを防ぎ、データの整合性を高められるのは大きなメリットですよね。

まとめ

今回は、JavaScriptのDocument.formsを使ったフォーム操作について、基本から応用まで詳しく解説しました。

フォームの取得や値の設定、送信など、Document.formsを活用することでHTMLフォームを自在に操作できることがわかったと思います。

ぜひ、今回学んだDocument.formsの知識を実際の開発に役立ててください。

Document.formsを使いこなすスキルは、Webアプリケーション開発者にとって大きな武器になるはずです。

これからのJavaScript開発で、ぜひDocument.formsを活用してみてください！