HTMLのformのactionのmethodについて

HTML

HTMLのformのactionのmethodについて

HTMLのform要素には、データをサーバーに送信するためにaction属性とmethod属性を使用します。
これらの属性についての理解は、フォームの機能と挙動を正確に制御するために重要です。

action属性

action属性は、フォームデータを送信する先のURLを指定します。
つまり、フォームが送信されると、データはこのURLに送信されます。
この属性が設定されていない場合、フォームデータは現在のページのURLに送信されます。

例:

<form action="/submit-form" method="post">
  <!-- フォームの入力フィールド -->
  <input type="text" name="username">
  <input type="submit" value="送信">
</form>

この例では、フォームが送信されると、データは/submit-formにPOSTリクエストとして送信されます。

method属性

method属性は、フォームデータを送信する際のHTTPメソッドを指定します。
主に二つの値が使用されます：

  • GET：フォームデータをURLのクエリ文字列として送信します。

データはURLに追加され、サーバーに送信されます。
通常、データが少量であり、フォームがデータの変更を伴わない場合に使用されます。
例えば、検索クエリを送信する際などです。

例:

<form action="/search" method="get">
  <input type="text" name="query">
  <input type="submit" value="検索">
</form>

この例では、/searchにGETリクエストが送信され、フォームデータはURLに含まれます（例: /search?query=example）。

  • POST：フォームデータをHTTPリクエストのボディに含めて送信します。

データがURLに表示されることはなく、大量のデータやセキュアなデータ（パスワードなど）を送信する際に使用されます。

例:

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="送信">
</form>

この例では、/submitにPOSTリクエストが送信され、データはリクエストのボディに含まれます。

GETとPOSTの使い分け

  • GETメソッドは、データをURLに含めるため、データの量に制限があり、セキュリティに影響を及ぼす可能性があります。

リクエストの内容がURLに表示されるため、機密情報を含むフォームには適しません。
主に検索機能やフィルタリングに使用されます。

  • POSTメソッドは、データをHTTPリクエストのボディに含めるため、大量のデータや機密情報を送信する際に適しています。

データがURLに表示されないため、より安全です。
フォームの送信やユーザー登録、ログインなど、データの変更を伴う操作に使用されます。

総括

フォームのactionとmethod属性は、フォームデータの送信先と送信方法を指定する重要な属性です。
action属性はデータの送信先URLを設定し、method属性はHTTPメソッド（GETまたはPOST）を選択します。
適切な設定を行うことで、データ送信の安全性や効率を確保できます。