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 を使用すると、フォームの検証、データ処理、インタラクティブな効果を簡単に実装できます。
関連する質問と回答
-
質問: JavaScript を使用してフォームの送信をキャンセルするにはどうすればよいですか?
回答: フォームのsubmit
イベントリスナー内でevent.preventDefault()
メソッドを使用します。 -
質問: JavaScript を使用してフォームに入力された値を取得するにはどうすればよいですか?
回答:document.getElementById("elementId").value
を使用して、要素の ID で要素を取得し、そのvalue
プロパティにアクセスします。 -
質問: JavaScript を使用してフォームの送信方法 (GET または POST) を変更するにはどうすればよいですか?
回答: フォームオブジェクトのmethod
プロパティを設定します。例:form.method = "POST";