わかっていてもよく抜けてしまう場合のある事項をチェックリストとしてまとめてみました。
method=”POST”
フォームの属性に method=”POST” がないと、フォームの動作のデフォルトでは “GET” メソッドでフォームが送信される。
<form method="POST"> ...
enctype=”multipart/form-data”
ファイルアップロードを行う際には enctype=”multipart/form-data” の指定が必要である。
<form method="POST" enctype="multipart/form-data"> ... </form>
(参考)
enctype=”multipart/form-data” の指定があるとリクエストヘッダの Content-Type が “multipart/form-data; boundary=—-…..” などとなり、通常のフォームの場合と異なる。フォームデータはコントロールごとに boundary 文字列により分けられる。
input タグなどには name 属性が必要
input, textarea, select, hidden などホストへ送りたいデータを含む HTML エレメントには name 属性を必ずつける。
サーバへは name 属性と value 属性の内容が送信されるため、name の指定が必要である。(id ではダメ)
<input type="text" name="occupation" ... >
なお、JavaScript を使って自分で送信データを構築する場合は必須ではない。
フォームを送信するボタンの type 属性を指定する
input タグで type 属性の指定がないと type=”button” になるようです。一方、button タグでは type 属性の指定がないと type=”submit” になるようです。そのため、type 指定がない場合、意図しない動作を避けるために必ず type 属性を指定すること。
<input type="submit" value="Click">
<button type="button" ...>Click
JavaScript を使ってフォームを POST する場合は、デフォルトの動作を抑止する。
JavaScript でユーザ入力をチェックしてからフォームを POST したい場合、フォームのデフォルト動作を抑止しないと正しく動作しない場合がある。
onsubmit=”return false;”
次のように、フォームに onsubmit=”return false;” 属性を設定しておくと、フォームのデフォルト動作を抑止できる。
event.preventDefault()
あるいは、JavaScript のハンドラで event.preventDefault() メソッドをコールすることによりフォームのデフォルト動作を抑止することもできる。
form.addEventListener("submit", function(e) {
e.preventDefault(); // <= これ！
});
FormData オブジェクトを使ってフォームを POST する場合は、サーバ側が対応しているか確認する。
JavaScript を使ってフォームを POST する場合、フォームを FormData オブジェクトとして Fetch API で送信することもできる。
この場合、FormData の内容は Content-Type=”x-www-form-urlencoded” (普通のフォームデータ) でなく、Content-Type=”multipart/form-data” にエンコードされる。
よって、サーバ側がリクエストヘッダの Content-Type からリクエストボディが multipart/form-data であることを判断できないとエラーになり正しく動作しない。
(正しく動作しない場合、サーバ側でミドルウェアを追加することで解決できる場合もある)
JSON や XML を Fetch API で POST する場合の注意
JavaScript の Fetch API を使うとフォームデータを JSON や XML 形式で POST することができる。
その際は、サーバ側がこれらのデータ形式のリクエストつまりリクエストヘッダの Content-Type を読み取り、その内容に対して対して正しく動作できないとエラーになる。
また、 Content-Type は必ず application/json や application/xml とすること。
text/json はないが、text/xml は MIME として存在する。text/… は人が読むデータであることを意味し、application/… はシステムが理解・処理するデータであることを意味する。
BLOB データを POST する場合はエンコードしてはならない
ArrayBuffer のようなバイナリーデータ (BLOB) を Fetch API で POST することが可能である。その際は、これらのデータはそのまま純粋なバイナリーデータとして送信する。