##formとはいったい ユーザからサーバに情報を送信できるようにする仕組み。
##書き方
submit##重要なこと 誰に(action)、どんな方法(method,enctype)で処理してもらうか。
##action formデータの送り先。省略した場合は自分。
<!-- 自分自身 -->
<form>
<!-- 自分のサーバの別のURL -->
<form action="/hoge">
<!-- 別のサーバ -->
<form action="http://hoge.com">
##method HTTPメソッド。GETかPOST。PUTとDELETEはHTTPがサポートしていないので。
###GET リソースの取得をお願いするメソッド。 ECサイトで「NEW」フラグがついてるものを取得する的な。 パラメータをURLに付加して送る。リクエストのボディは空。 URLの長さには制限(2000文字ぐらい)があるので、あまりにも長い場合はPOSTする。
GET /?say=Hi&to=Mom HTTP/1.1
Host: foo.com
###POST リソースの追加・変更・削除をお願いするメソッド。 ECサイトで会員登録する的な。 パラメータはリクエストのボディにいれて送られる。 URLに付加されないだけで、よく見たら丸見えなので安全なわけではない。 安全にしたければHTTPSだね。
POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
##enctype この属性でHTTPヘッダのContent-Typeを指定する。 基本的に、HTTPでやりとりされるデータはテキスト(text/html)だが、formでアップロードされるファイルは画像などのバイナリがあったりするので、それを送るための仕組みが必要。
###application/x-www-form-urlencoded デフォルト。POSTメソッドでフォームを文字列でURLエンコードして送る。ただし、半角スペースは「+」に変換される。テキストデータだけ送る場合はコレ。
###multipart/form-data ファイルを送る場合は、Content-typeがファイルごとに違ったり、ファイル名があったりで色々ややこしいので、この属性でファイルごとに複数のパート(multipart)に分けて送信する。リクエストボディがboundary(---------みたいなやつ)で区切られてそれぞれのバイナリーがBase64エンコードされた状態で格納される。
#HTTP Header
POST /hoge HTTP/1.1
multipart/form-data; boundary=----WebKitFormBoundaryrGyBoWY8TG5E2ZbU
#HTTP Body
------WebKitFormBoundaryrGyBoWY8TG5E2ZbU
Content-Disposition: form-data; name="file1"; filename="lion.jpg"
Content-Type: image/jpeg
DATADATADATA エンコードされたデータ DATADATADATA
------WebKitFormBoundaryrGyBoWY8TG5E2ZbU
Content-Disposition: form-data; name="text2"
world
------WebKitFormBoundaryrGyBoWY8TG5E2ZbU
Content-Disposition: form-data; name="file2"; filename="favicon.ico"
Content-Type: image/vnd.microsoft.icon
DATADATADATA エンコードされたデータ DATADATADATA
------WebKitFormBoundaryrGyBoWY8TG5E2ZbU--
##おまけ - Base64とはいったい - データを64種類(6ビット)の印字可能な英数字を用いて表現するエンコード方式。 6ビットづつデータを分割して、変換表から変換する。デコードは逆。 メールやBasic認証などでも使われる。
##参考 参考というよりもほぼコレの要約 MDN