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

HTML DOM フォームの method プロパティとは？使い方をわかりやすく解説

HTML DOM の form method プロパティは、form 要素の method 属性に関連付けられたプロパティです。フォームデータをサーバーへどのような方法で送信するかを指定する際に使用します。データの送信先アドレスは action 属性によって指定され、このプロパティを使うことで method 属性の値を取得・設定できます。

構文

method プロパティを設定する場合の基本的な構文は以下のとおりです。

formObject.method = "get" | "post";

get はデフォルトのメソッドで、フォームデータを URL の末尾に付加して送信します（例：URL?name=value&name=value）。送信内容が URL 文字列として表示されるため、機密性の高いデータには適しておらず、公開しても問題ない情報の送信に限定して使うのが一般的です。

もう一方の post は、HTTP POST トランザクションとしてデータを送信する方法です。送信内容が URL 上に現れないため、get よりも安全とされており、個人情報などプライベートなデータの送信に向いています。

サンプルコード

ここで、form method プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    form {
        border: 2px solid blue;
        margin: 2px;
        padding: 4px;
    }
</style>
<script>
    function ChangeMethod() {
        document.getElementById("FORM1").method = "get";
        document.getElementById("Sample").innerHTML = "フォームの method が 'post' から 'get' に変更されました";
    }
</script>
</head>
<body>
<h1>フォーム method プロパティの例</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>下のボタンをクリックすると、上のフォームの method 属性値が変更されます</p>
<button onclick="ChangeMethod()">変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM フォームの method プロパティとは？使い方をわかりやすく解説

SUBMIT ボタンをクリックして URL を確認すると、以下のようになります。

127.0.0.1:5500/sample_page.php

次に「変更」ボタンをクリックすると、画面は以下のように変化します。

HTML DOM フォームの method プロパティとは？使い方をわかりやすく解説

この状態でもう一度 SUBMIT ボタンをクリックし、URL を確認してみましょう。

127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22

入力したデータが URL に付加されて送信されていることが確認できます。

コードの解説

この例では、まず id="FORM1"、method="post"、action="/sample_page.php" を持つフォームを作成しています。method 属性に post を指定することで、フォームデータが安全に転送され、第三者から容易に閲覧されないようになっています。フォームにはテキスト入力フィールドが 2 つと、データをサーバーへ送信するための submit ボタンが配置されています。

<form id="FORM1" method="post" action="/sample_page.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>

次に、「変更」ボタンを作成し、ユーザーがクリックすると ChangeMethod() 関数が実行されるようにしています。

<button onclick="ChangeMethod()">変更</button>

ChangeMethod() 関数では、document オブジェクトの getElementById() メソッドを使ってフォーム要素を取得し、その method 属性値を「get」に設定しています。値が「get」に変わることで、ユーザーの入力データが URL 上に表示される状態になります。さらに、id="Sample" の段落要素の innerHTML プロパティを使って、この変更内容を示すテキストを画面に表示しています。

function ChangeMethod() {
    document.getElementById("FORM1").method = "get";
    document.getElementById("Sample").innerHTML = "フォームの method が 'post' から 'get' に変更されました";
}

このように、JavaScript から form method プロパティを操作すれば、ページを再読み込みすることなくフォームの送信方法を動的に切り替えることが可能です。用途に応じて get と post を適切に使い分けましょう。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要