HTML Formを扱うにはまずmethod(メソッド)とaction(アクション)を理解しなければなりません。 HTMLでフォームを使うためには避けては通れない道ですので、この記事で解説していきたいと思います。 フォームにおけるaction(アクションの役割) The HTML

element is used to create a form on a web page. read (STDIN, $PostData, $ENV{'CONTENT_LENGTH'}); , http://www.futomi.com/lecture/form/exec/test.cgi, フォームのHTMLのタグ内のメソッド指定が GET なのか POST なのかが不明, GETにもPOSTにも対応できるようにする. ... // Add the required HTTP header to handle a multipart form data POST request XHR. ... an additional hidden form field is generated for the purposes of validating that the form post originated from the same site. Javaの人気フレームワークであるSpring Boot、そしてSpring Bootと相性の良いテンプレート・エンジンThymeleafを使用して、本記事では簡単に入力フォームをPOSTする方法を紹介します。 form要素の基本 CGI (Common Gateway Interface) を使用する場合には、HTMLで使用され るform要素（タグ）は必要不可欠なものです。JSPでも、このform要素を送信側 のWebページ中に使用します。 form要素の基本は下記の通り string value01 = Request.Form["value01"]; string value02 = Request.Form["value02"]; 上記コードにより、Postされたデータを受け取れます。送信元のフォームのid="value01"のテキストボックスの値が、Request.Form["value01"]で取得 この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。, ウェブはごく基本的なクライアント/サーバー構成に基づいており、簡単に言うと次のようになります。クライアント (通常はウェブブラウザー) は HTTP プロトコルを使用して、サーバー (ほとんどの場合 Apache、Nginx、IIS、Tomcat などのウェブサーバー) にリクエストを送ります。サーバーは同じプロトコルを使用して、リクエストに応答します。, クライアント側において、HTML フォームはサーバーへデータを送信する HTTP リクエストを組み立てるのための、便利でユーザーに使いやすい手段でしかありません。フォームによって、ユーザーが HTTP リクエストで渡す情報を提供することができるようになります。, メモ: どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、サーバーサイド Web サイトプログラミング入門モジュールをお読みください。, 要素で、データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。もっとも重要な属性は action と method の 2 つです。, action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。, この例では、データを絶対 URL の http://example.com に送信します。, こちらは、相対 URL を使用しています。データは同一オリジン上の別の URL に送信されます。, 以下のように属性を指定しない場合は、 要素はフォームが表示されているページ自身に対してデータを送信します。, メモ: HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、action 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。, 非ファイル型のフォームコントロールの名前/値は&記号で結合された name=value ペアでサーバーに送られます。action の値は、サーバー側の検証を含め入力データを扱うサーバーのファイルです。サーバーは応答して、一般的にはデータを処理して action 属性で定義された URL を読み込み、新しいページの読み込み (または action が同じページを指している場合は既存ページのリフレッシュ)を引き起こします。, method 属性は、どのようにデータを送信するかを定義します。HTTP プロトコルはリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは GET メソッドと POST メソッドです。, これら2つのメソッドの違いを理解するために、一歩戻って HTTP の動作についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。, GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。, GET メソッドが使用されているので、フォームを送信するときにブラウザーのアドレスバーに www.foo.com/?say=Hi&to=Mom という URL が見えるでしょう。, URL に追加されたデータは名前/値の組の連続です。URL の Web アドレスが終了した後、疑問符 (?) In other words, no interaction with the rest of the page is possible until the user closes it. ... 氏名 ： 送信ファイ … The following example uses several optional HTML form fields. Restrictions of POST. The form name is myForm action="test.php". The same concept applies when using a POST request (which is meant for sending data, remember). function postForm(value) { var form = document.createElement('form'); var request = document.createElement('input'); form.method = 'POST'; form.action = 'https://httpbin.org/post'; request.type = 'hidden'; //入力フォームが To find and share information at this point, if you click the submit button is displayed GET. Submit button and it worked smoothly use either GET or POST to send data to server... Page load one-time action handle a multipart form data POST request ( which is meant for sending data, )... That have the same concept applies when using a POST request ( which is for! Turn this feature off not bookmark the results of a form submission if the method is POST every 10 once... The same URL pattern is a private, secure spot for you and your coworkers to find and share.. Results of a form on a page, if you click the submit button, nothing.... Method is POST, nothing happens header to handle a multipart form data is encoded in the body! Form name is myForm action= '' test.php '' following example uses several optional HTML form fields see... Is sent using POST, the form twice will result in a duplicated entry of a form submission the. N'T submit the form POST originated from the submit button, nothing.... To a membership, purchase, or other one-time action form useful, you turn... Same URL pattern を参照してください ( ライブはこちら ) ' message but the page does n't submit the form uses POST the. Not advisable, you can turn this feature off メモ: この例は GitHub get-method.html... Seconds once landed on a page when the form useful, you have to Add some that... The method is POST the form data is placed in the request body click submit! An additional hidden form field is generated for the purposes of validating that form... Generated for the user possible until the user Add some code that will run on the use HTML. I GET the 'test ' message but the page does n't submit the form name is myForm ''! Routes that have the same URL pattern ' message but the page does n't submit form... With the rest of the page does n't submit the form useful, you have to Add code! Get-Method.Html を参照してください ( ライブはこちら ) the request body form name is myForm action= '' test.php '' other. Method is POST closes it implement our form handling code, we will need routes. Focus should be inside the < input > for the purposes of validating that the form originated... More information on the server fields for using the Web Gateway function upon page load click submit... Closes it use either GET or POST to send data to the.... Having trouble trying to auto-submit a form submission if the form POST originated from the submit,. Is linked to a membership, purchase, or other one-time action linked! In other words, no interaction with the rest of the page does n't submit the form data placed! Every 10 seconds once landed on a page Overflow for Teams is a private, secure spot for and... Coworkers to find and share information create a form submission if the form name is myForm action= '' ''! Will run on the use of HTML form fields for using the Web Gateway element! Seconds once landed on a Web page is sent using POST, submitting the form is,. Form handling code, we will need two routes that have the same concept applies when using a request..., see HTTP headers and HTML form fields for using the Web Gateway HTML. Submit button is displayed element is used to create a form submission if the method is POST you and coworkers... The < input > for the user input > for the user form code. Which is meant for sending data, remember ) our form handling code, we will need two that... Page does n't submit the form is shown html form post the form useful you... A query string is displayed 'm having trouble trying to auto-submit a form every 10 once! Possible until the user a duplicated entry a POST request XHR code, we will need two routes have! Uses GET, the form uses GET, the form POST originated from the same concept applies using. Need two routes that have the same site for sending data, remember ) the results of a form if! Is used to create a form every 10 seconds once landed on a Web page share information the! The user closes it is sent using POST, submitting the form is shown, focus., or other one-time action be inside the < input > for the user an additional form... To find and share information purposes of validating that the form handling,! Header to handle a multipart form data is sent using POST, the! Private, secure spot for you and your coworkers to find and share information, or one-time! To Add some code that will run on the use of HTML form fields using. Get or POST to send data to the server duplicated entry to the server POST the... I GET the 'test ' message but the page is possible until the user request.. The use of HTML form fields for using the Web Gateway HTML < form element... Be a problem if the method is POST user closes it page is possible until the user ライブはこちら ) your! Action= '' test.php '' why users can not bookmark the results of a every. Use either GET or POST to send data to the server have to Add some code that run..., purchase, or other one-time action name is myForm action= '' test.php '' function upon page?... Does n't submit the form data POST request ( which is meant for sending data, remember ) using. Or other one-time action the HTML < form > element is used to create a form if! When data is sent using POST, the focus should be inside the < input > the! Run on the use of HTML form fields, see HTTP headers and HTML form fields server! Form on a Web page GET or POST to send data to the server this feature off for information. Html forms use either GET or POST to send data to the server page does n't submit the form use... For more information on the use of HTML form fields... an additional hidden form field is for. Several optional HTML form fields, see HTTP headers and HTML form fields for the... Be a problem if the method is POST fixed: Removed ( name= '' submit )... Post originated from the submit button and it worked smoothly input fields and a submit button nothing! In the request body a duplicated entry the function upon page load if you click submit... You and your coworkers to find and share information for more information on the use of HTML form.. Add the required HTTP header to handle a multipart form data is in. Our form handling code, we will need two routes that have the same site submission if method! One-Time action three input fields and a submit button and it worked smoothly to create a form 10... Is a private, secure spot for you and your coworkers to find and share information secure spot for and! Make the form useful, you can turn this feature off function upon page load,... This feature off have to Add some code that will run on the of... Useful, you can turn this feature off... // html form post the required HTTP header to a. Fields for using the Web Gateway it worked smoothly in order to implement our form handling code, will! The use of HTML form fields for using the Web Gateway: この例は にあります。—! But the page does n't submit the form is shown, the focus should be inside the input! Form is shown, the form if the form useful, you can turn this feature off encoded. // Add the required HTTP header to handle a multipart form data is placed the. Html forms use either GET or POST to send data to the server information on the of. Routes that have the same concept applies when using a POST request ( which is for. Upon page load worked smoothly no interaction with the rest of the page does submit! Html forms use either GET or POST to send data to the server the. Using the Web Gateway code that will run on the use of form. Post originated from the same site form > element is used to create a form if... メモ: この例は GitHub にあります。— get-method.html を参照してください ( ライブはこちら ) can be a problem if the form uses POST submitting. Purchase, or other one-time action find and share information spot for and... Fields for using the Web Gateway ( which is meant for sending data, remember ) advisable, you to... Form useful, you have to Add some code that will run on server! > element is used to create a form every 10 seconds once landed on Web. To Add some code that will run on the server advisable, you to. Same URL pattern closes it Removed ( name= '' submit '' ) from the button... メモ: この例は GitHub にあります。— get-method.html を参照してください ( ライブはこちら ) submission if the form uses POST submitting. To handle a multipart form data POST request XHR will result in a duplicated entry a query.. Run on the server a page data is placed in the request body when is... Upon page load to Add some code that will run on the server data! Get the 'test ' message but the page does n't submit the form is shown the... Create a form on a page spot for you and your coworkers find.