[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法

sinatraでAPIを作っていてはまったのだが、現在のブラウザはGETとPOSTの通信方式にしか対応していないらしい。

失敗例

<form method="delete" action="/">
    <input type="text" name="textArea">
    <input type="submit" value="delete!!">
</form>

↓

192.168.33.1 - - [22/Jul/2015:03:08:16 +0000] "GET /?textArea= HTTP/1.1" 200 198 0.0008

こうやってdeleteを指定したにも関わらずGETになってしまう。

対応方法

hidden属性でnameを_methodにし、valueを使いたい方式にすればいけるようです。

DELETE

<form method="post" action="/">
    <input type="text" name="textArea">
    <input type="hidden" name="_method" value="DELETE"> <!-- この1行を追加！ -->
    <input type="submit" value="delete!!">
</form>

↓

192.168.33.1 - - [22/Jul/2015:03:12:27 +0000] "DELETE / HTTP/1.1" 200 212 0.0014

DELETEになってる！

PUT

PUTも同じようにDELETEをPUTに変更するだけ

<form method="post" action="/">
    <input type="text" name="textArea">
    <input type="hidden" name="_method" value="PUT"> <!-- この1行を追加！ -->
    <input type="submit" value="delete!!">
</form>

↓

192.168.33.1 - - [22/Jul/2015:03:13:42 +0000] "PUT / HTTP/1.1" 404 466 0.0010

PUTになってる！

Rails

Railsでも内部で同じことをしているらしい
link_to - リファレンス - - Railsドキュメント