HTML DOM form オブジェクト

HTML DOM Form オブジェクト - ウェブフォーム操作を簡素化

この記事では、HTML DOM の Form オブジェクトについて、そのプロパティ、メソッド、および JavaScript を使用したフォーム要素の操作方法について詳しく説明します。

1. Form オブジェクトとは

  • Form オブジェクトは、HTML ドキュメント内の <form> 要素を表します。
  • Form オブジェクトを使用すると、JavaScript は入力フィールド、ボタン、ドロップダウンリストなど、フォーム内のすべての要素にアクセスして操作できます。

2. Form オブジェクトへのアクセス

  • id で取得: document.getElementById("formId")
  • name 属性で取得: document.forms["formName"]
  • ドキュメント内のフォームのインデックスで取得: document.forms[0]

3. Form オブジェクトのプロパティ

プロパティ 説明
action フォーム送信先の URL アドレスを設定または返します。
elements フォーム内のすべての要素を含むコレクションを返します。
encoding / enctype フォームデータのエンコード方式を設定または返します。
length フォーム内の要素数を返します。
method フォームデータをサーバーに送信する HTTP メソッド (GET または POST) を設定または返します。
name フォームの名前を設定または返します。
target フォームの送信時に応答を表示する場所 (新しいブラウザウィンドウやタブなど) を設定または返します。

4. Form オブジェクトのメソッド

  • submit(): フォームを送信します。ユーザーがフォームの送信ボタンをクリックした場合と同じです。
  • reset(): フォームをリセットします。すべてのフォーム要素をデフォルト値に戻します。

5. フォーム要素の操作

  • Form.elements コレクションを使用して、フォーム内の個々の要素にアクセスします。
  • 各フォーム要素は DOM オブジェクトであるため、対応するプロパティとメソッドを使用して操作できます。たとえば、入力値の取得、要素属性の設定などです。

6. 例

次のコードは、JavaScript を使用してフォームデータを取得し、フォームを送信する方法を示しています。 


<form id="myForm">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="送信">
</form>

<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", function(event) {
    event.preventDefault(); // デフォルトのフォーム送信動作を防止

    const name = document.getElementById("name").value;
    console.log("名前:", name);

    // ここで、フォームデータをサーバーに送信できます
  });
</script>

まとめ

HTML DOM Form オブジェクトは、開発者にウェブフォームを操作するための便利な方法を提供します。JavaScript を使用すると、フォームの検証、データ処理、インタラクティブな効果を簡単に実装できます。

関連する質問と回答

  1. 質問: JavaScript を使用してフォームの送信をキャンセルするにはどうすればよいですか?
    回答: フォームの submit イベントリスナー内で event.preventDefault() メソッドを使用します。
  2. 質問: JavaScript を使用してフォームに入力された値を取得するにはどうすればよいですか?
    回答: document.getElementById("elementId").value を使用して、要素の ID で要素を取得し、その value プロパティにアクセスします。
  3. 質問: JavaScript を使用してフォームの送信方法 (GET または POST) を変更するにはどうすればよいですか?
    回答: フォームオブジェクトの method プロパティを設定します。例: form.method = "POST";