html 入力フォーム 送信先

HTML 入力フォームにおける送信先の指定方法について解説

HTML 入力フォームを使用する際、フォームのデータをどのように送信するかを決めるためには、action 属性と method 属性の設定が非常に重要です。本記事では、**「HTML 入力フォーム 送信先」**というテーマに基づき、送信先URIの指定方法、送信形式との関係、具体的な使用例、注意点について詳しく解説します。

送信先URIの指定 (HTML 入力フォーム 送信先 URI)

入力フォームでは、送信先を指定するためにaction 属性を使用します。この属性は、フォームデータを受け取るプログラムやスクリプトのURI（Uniform Resource Identifier）を指定します。
例えば、example.cgiというスクリプトにフォームデータを送信する場合、以下のように記述します。

html
<form action="example.cgi">
  <!-- フォーム内容 -->
</form>​

ここで重要なのは、action属性の値に有効なURIを指定することです。ローカル環境であればファイルパス、インターネット上であれば絶対パスや相対パスを使用できます。action 属性を空にすると、デフォルトで現在のページが送信先となります。

送信形式（method）との関係 (HTML 入力フォーム 送信先 method)

action 属性が送信先のURIを指定するのに対し、method 属性は送信形式を決定します。フォームで使用できる送信形式は主に2種類です：

  1. GET メソッド
    データをURLにクエリ文字列として付加して送信します。クエリパラメータとしてデータがURLに含まれるため、検索フォームやデータ共有が簡単な操作に適しています。
    例:

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

    送信先URIは次のようになります：
    https://example.com/search.cgi?query=入力値

  2. POST メソッド
    データをリクエストボディ（本文）に含めて送信します。大量のデータや機密性の高いデータを扱う場合に使用されます。例として、ユーザーの登録フォームやメッセージ送信フォームが挙げられます。

送信先と送信形式の具体例 (HTML 入力フォーム 送信先 post)

以下は、CGIスクリプトにPOST形式でデータを送信する具体的な例です。

html
<form method="post" action="formmail.cgi">
  <p>お名前：<br>
    <input type="text" name="name" size="30">
  </p>
  <p>メッセージ：<br>
    <textarea name="message" cols="30" rows="5"></textarea>
  </p>
  <p>
    <input type="submit" value="送信する">
  </p>
</form>​
  • 送信先: formmail.cgi（サーバー上のスクリプト）
  • 送信形式: POST形式を指定することで、フォームデータが本文として送信されます。

この方法は、ユーザーからの問い合わせや長文メッセージの送信に広く利用されています。

重要な注意点（HTML Living Standardの最新仕様）

HTML仕様は常に進化しており、HTML Living Standardに基づく新しい機能が追加されています。そのため、古い仕様に基づいて設計したフォームが最新のブラウザで正しく動作しない場合があります。
特に、以下の点に注意してください：

  • action 属性が空の場合、現在のページが送信先となる仕様はそのままですが、HTML5以降では、セキュリティ強化の観点からCORS（クロスオリジンリソース共有）に関する制限が追加されています。
  • method 属性のデフォルト値は GET ですが、送信先プログラムの要件に応じて明示的に設定することを推奨します。

公式ドキュメントや最新仕様を確認しながらフォーム設計を行うと、よりセキュアでユーザーフレンドリーな実装が可能になります。

まとめ

HTML入力フォームにおける送信先の指定では、action 属性で送信先URIを、method 属性で送信形式を指定します。この2つの属性を正しく組み合わせることで、フォームデータの送信プロセスを制御できます。

  • 送信先を指定するには action 属性
  • 送信形式を決定するには method 属性

特に、POST形式を使用する場合には、セキュリティやデータの整合性に注意を払う必要があります。フォームを作成する際には、最新のHTML仕様やセキュリティガイドラインを確認しながら設計を進めましょう。

参考URL: MDN web docs - <form> タグ

よくある質問 (FAQ)

Q1: HTML フォームの送信方法はどのように設定しますか？
A1: フォームの action 属性に送信先の URL を指定し、method 属性で送信方法を選択します。
Q2: 複数の入力フィールドを追加できますか？
A2: はい、<input> や他のフォーム要素を追加することで、複数のフィールドを持つフォームを作成できます。
Q3: フォーム送信後のリダイレクトはどうしますか？
A3: フォームを処理するサーバー側のスクリプトでリダイレクトを設定することが一般的です。

その他の参考記事:html 入力 フォーム