JavaScript フォームオブジェクトの解説

• window.document.forms
• window.document.forms.length
• window.document.form
• window.document.form.action
• window.document.form.encoding
• window.document.form.method
• window.document.form.name
• window.document.form.target
• window.document.form.submit()
• window.document.form.reset()
• window.document.form.handleEvent(event)

window.document.forms

window.document.formsは、HTMLドキュメント内に存在するすべてのフォームを格納した配列です。この配列には、フォームのインデックス番号またはフォーム名を使ってアクセスできます。例えば、ページに複数のフォームが存在する場合、それぞれをインデックスまたは名前で参照することができます。

例:

        var form1 = window.document.forms[0];  // 最初のフォーム
        var form2 = window.document.forms['loginForm'];  // 'loginForm'という名前のフォーム
    

window.document.forms.length

window.document.forms.lengthは、ページ内のフォームの数を返します。これを使うと、フォームがいくつ存在するかを動的に取得できます。

例:

        var numForms = window.document.forms.length;
        console.log(numForms);  // ページに存在するフォームの数を出力
    

window.document.form

window.document.formは、ページ内のフォームにアクセスするための一般的なプロパティです。フォームの名前やインデックス番号を使って、個別のフォームにアクセスできます。フォームが一つしかない場合などに便利です。

例:

        var form = window.document.form;  // ページ上の最初のフォーム
    

window.document.form.action

window.document.form.actionは、フォームが送信される際の送信先URLを指定するプロパティです。このプロパティを設定すると、フォーム送信時の送信先を変更できます。

例:

        var form = window.document.form;
        form.action = 'https://example.com/submit';  // フォーム送信先を設定
    

window.document.form.encoding

window.document.form.encodingは、フォームが送信される際のエンコーディング方法を指定するプロパティです。通常は「application/x-www-form-urlencoded」や「multipart/form-data」などを指定します。

例:

        var form = window.document.form;
        form.encoding = 'multipart/form-data';  // ファイルアップロードを含むフォーム送信
    

window.document.form.method

window.document.form.methodは、フォーム送信のHTTPメソッド（通常はGETまたはPOST）を指定するプロパティです。デフォルトでは「GET」ですが、送信内容によって「POST」に変更することができます。

例:

        var form = window.document.form;
        form.method = 'POST';  // フォーム送信のメソッドをPOSTに設定
    

window.document.form.name

window.document.form.nameは、フォームに設定されている名前を取得または設定するためのプロパティです。この名前は、フォームにアクセスする際に使用されます。

例:

        var form = window.document.form;
        form.name = 'contactForm';  // フォームに名前を設定
    

window.document.form.target

window.document.form.targetは、フォームの送信結果を表示するターゲットウィンドウを指定するプロパティです。例えば、「_blank」を指定すると新しいウィンドウで送信結果が表示されます。

例:

        var form = window.document.form;
        form.target = '_blank';  // 新しいウィンドウでフォーム送信結果を表示
    

window.document.form.submit()

window.document.form.submit()は、フォームをプログラム的に送信するためのメソッドです。通常、フォーム内の送信ボタンをクリックすることで送信されますが、JavaScriptでこのメソッドを呼び出すことでも送信できます。

例:

        var form = window.document.form;
        form.submit();  // フォームを送信
    

window.document.form.reset()

window.document.form.reset()は、フォーム内のすべての入力フィールドを初期状態にリセットするメソッドです。ユーザーが入力した内容をクリアしたい場合に使用します。

例:

        var form = window.document.form;
        form.reset();  // フォームの内容をリセット
    

window.document.form.handleEvent(event)

window.document.form.handleEvent(event)は、イベントが発生したときにフォームに関連する処理を実行するためのメソッドです。フォームに対するイベント（例：送信、リセットなど）を処理するために利用します。

例:

        var form = window.document.form;
        form.addEventListener('submit', function(event) {
            event.preventDefault();  // デフォルトの送信動作をキャンセル
            alert('フォームが送信されました');
        });