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

HTML DOMのInput Submit formMethodプロパティとは？使い方を徹底解説

formMethodプロパティとは

HTML DOMのInput Submit formMethodプロパティは、送信ボタン（type="submit"のinput要素）のformMethod属性値を設定または取得するために使用されます。このプロパティを使うことで、フォームデータをサーバーへ送信する際に利用するHTTPメソッドを指定できます。

重要なポイントとして、formMethod属性の値は、<form>要素に設定されたmethod属性の値を上書きします。つまり、フォーム全体の設定を変更せずとも、特定の送信ボタンだけ異なるHTTPメソッドを使いたい場合に便利です。なお、この属性はHTML5で新たに導入されたものです。

構文

formMethodプロパティを設定する場合の構文は以下の通りです。

submitObject.formMethod = get|post

getメソッドの特徴

getはデフォルトのメソッドで、フォームデータをURLの末尾に付加して送信します。例：「URL?name=value&name=value」の形式になります。

  • 送信されるデータがURL文字列としてユーザーに見えてしまうため、セキュリティ面では劣ります
  • 氏名や検索キーワードなど、公開しても問題ないデータの送信に適しています
  • URLの長さに制限があるため、大量のデータ送信には不向きです

postメソッドの特徴

postは、HTTP POSTトランザクションとしてデータを送信するため、getメソッドよりもセキュアです。

  • データがURLに表示されないため、第三者が送信内容を目にすることができません
  • getメソッドのようなサイズ制限がないため、大量のデータも送信可能です
  • パスワードや個人情報など、機密性の高いデータの送信に推奨されます

サンプルコード

それでは、Submit formMethodプロパティの具体的な使用例を見てみましょう。この例では、初期値が「post」に設定された送信ボタンのformMethod属性値を、ボタンクリックによって「get」に変更します。

<!DOCTYPE html>
<html>
<body>
<h1>Submit formMethodプロパティの例</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
ユーザー名： <input type="text" id="USR"> <br>
所在地： <input type="text" id="Loc"><br><br>
<input type="submit" id="SUBMIT1" formmethod="post">
</form>
<p>下のボタンをクリックすると、フォーム内の送信ボタンのformMethod属性値が「get」に変更されます</p>
<button onclick="changeMethod()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeMethod() {
        document.getElementById("SUBMIT1").formMethod = "get";
        document.getElementById("Sample").innerHTML = "formMethod属性の値がpostからgetに変更されました";
}
</script>
</body>
</html>

実行結果

上記のコードを実行すると、緑色の枠で囲まれたフォームと「CHANGE」ボタンが表示されます。

HTML DOMのInput Submit formMethodプロパティとは？使い方を徹底解説

「CHANGE」ボタンをクリックすると、JavaScriptのchangeMethod()関数が実行され、送信ボタンのformMethod属性値が「post」から「get」に変更され、その旨のメッセージが画面に表示されます。

HTML DOMのInput Submit formMethodプロパティとは？使い方を徹底解説

まとめ

formMethodプロパティを使えば、送信ボタン単位でHTTPメソッドを柔軟に制御できます。機密情報を扱う場合は「post」、検索条件などの公開可能なデータには「get」といった使い分けが可能になり、より安全で効率的なフォーム設計に役立ちます。

  1. HTML DOM 送信ボタンの formTarget プロパティとは？使い方を徹底解説

    HTML DOM の Input Submit formTarget プロパティは、フォームの送信ボタン（input type=submit）における formtarget 属性の値を取得・設定するためのプロパティです。このプロパティで指定した場所に、フォーム送信後のサーバーからのレスポンスが表示されます。なお、formTarget プロパティを設定すると、<form> 要素自体に指定された target 属性の値が上書きされる点に注意してください。この属性は HTML5 において、type=submit を持つ input 要素向けに新たに導入されました。構文（シンタックス）fo

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

    HTML DOM の Input Submit（送信ボタン）における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション（妥当性検証）を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type=submit の input 要素向けに新たに導入されました。 構文 formNoValidate プロパティを設定する場合の構文は以下の