JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdocument.formsプロパティでフォーム数を取得する方法

document.formsとは

JavaScriptのdocument.formsプロパティは、現在のドキュメント内に存在するすべての<form>要素のコレクション（HTMLCollection）を返します。このコレクションのlengthプロパティを参照することで、ドキュメント内にいくつの<form>タグが含まれているかを簡単に取得できます。

サンプルコード

以下のコードでは、ページ内に2つのフォームを配置し、document.forms.lengthを使ってフォームの総数を取得して表示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   <body>
      <h1>Employee Information</h1>
      <form>
         Name: <input type="text" name="name" value="Amit"><br>
         Subject: <input type="text" name="sub" value="Java">
      </form>
      <h1>Department Information</h1>
      <form>
         DepartmentID: <input type="text" name="dptid" value="D001"><br>
         Dept Name: <input type="text" name="dname" value="Marketing">
      </form>
      <script>
         var num = document.forms.length;
         document.write("<br>How many forms? "+num);
      </script>
   </body>
</html>

このコードを実行すると、ページに「How many forms? 2」と表示されます。これは、ドキュメント内に2つの<form>要素が存在することを示しています。

個別のフォームへのアクセス方法

document.formsは配列のように扱えるため、インデックス番号を指定して特定のフォームにアクセスできます。例えば、document.forms[0]とすれば1つ目のフォームを取得できます。また、フォームにname属性が設定されている場合は、document.forms["フォーム名"]のように名前を指定してアクセスすることも可能です。

さらに、取得したフォームオブジェクトからはelementsプロパティを使ってフォーム内の入力フィールドなどにアクセスできるため、フォームのバリデーションや値の動的な変更など、さまざまな処理に活用できます。

  1. JavaScriptのHTML DOMでaddEventListener()メソッドを使う方法をわかりやすく解説

    addEventListener()メソッドとは？ addEventListener()メソッドを使用すると、指定したHTML要素にイベントハンドラ（イベント発生時に実行される関数）を追加できます。クリックやダブルクリック、キー入力など、さまざまなイベントに対する処理を柔軟に登録できるのが特徴です。 基本的な構文は以下のとおりです。 要素.addEventListener(イベント名, 実行する関数); 同じ要素・同じイベントに対して複数のハンドラを登録できる点が、onclick属性などの従来の書き方との大きな違いです。 サンプルコード 次のコードを実行して、ボタンをダブルクリックしてみてくだ

  2. MongoDBにJavaScript関数を保存・実行する方法をわかりやすく解説

    MongoDBに保存されたJavaScriptを操作する方法 MongoDBでは、JavaScriptの関数をデータベース内の特別なコレクション「system.js」に保存できます。この仕組みを利用すれば、よく使う処理をサーバー側に登録しておき、必要なときにいつでも呼び出すことが可能です。関数の保存には db.system.js.save() メソッドを使用します。 JavaScript関数を保存する基本構文 db.system.js.save({ _id: anyFunctionName, value: function (returnValue) { re