Output Diary

プログラミング × 読書 のアウトプットを発信しています

フォームデータの送信

プログラミング

f:id:kina_kq:20210503082752j:plain

 

Webは基本的なクライアント・サーバー構成に基づいています。

クライアント（Webブラウザ）はHTTPプロトコルを使用してサーバーにリクエストを送ります。サーバーは同じプロトコルを使用してリクエストに答えます。

 

クライアント側において、HTMLフォームはサーバーへデータを送信するHTTPリクエストを組み立てるための、便利でユーザーに使いやすい手段でしかありません。

フォームによって、ユーザーがHTTPリクエストで渡す情報を提供することができます。

 

クライアント側：データ送信方法の定義

 

<form>要素で、データを送信する方法を定義します。

重要な属性はactionとmethodの２つです。

 

❏ action属性

action属性はどこにデータを送信するかを定義します。

値は妥当な相対 / 絶対URLでなければいけません。

絶対URL

<form action="http://example.com>"

 

相対URL

<form action="/somewhere_else">

 

属性を指定しない場合

<form>

 

<form>要素はフォームが表示されているページ自身に対してデータを送信します。

 

❏ method属性

どのようにデータを送信するかを定義します。

HTTPプロトコルはリクエストを実行するための方法をいくつか提供しており、HTMLフォームのデータは複数の方法で送信することが出来ます。

もっとも一般的なものはGETメソッドとPOSTメソッドです。

 

❍ GETメソッド

GETメソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザが使用するメソッドです。

まず、ブラウザは空の本文を送信します。

本文が空であるため、フォームをこのメソッドで送信する場合はデータをURLの後に付加します。

<form action="<http://foo.com>" method="get">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

GETメソッドが使用されているため、フォームを送信するときにブラウザのアドレスバーにwww.foo.com/?say=Hi&to=MomというURLが表示されます。

 

URLに追加されたデータは名前と組の連続になっています。

URLのWebアドレスが終了した後、疑問符（？）に続いて名前/値の組がそれぞれアンパサンド（&）で区切られて入ります。

  • say の値は Hi
  • to の値は Mom

HTTPリクエストは以下のようになります

GET /?say=Hi&to=Mom HTTP/1.1 Host: foo.com

 

❍ POSTメソッド

このメソッドはHTTPリクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザがサーバーへ送信するためのメソッドです。

このメソッドを使用してフォームを送信する場合は、データがHTTPリクエストの本文の後に追加されます。

<form action="<http://foo.com>" method="post">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

データがPOSTメソッドで送信されると、URLにはデータが追加されません。

HTTPリクエストは以下の通りです。

POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom