【Rails】form_tagの使い方を徹底解説!

Rails

form_tagとは

railsで情報を送信するためのヘルパーメソッドです。 form_tagを使うことにより、簡単に入力フォームに必要なHTMLを作成することができます。

form_tagの使い方
リンクをコピーしました

form_tagを使用する時には下記のように記述します。

erb
1
2
<%= form_tag('パス', 'オプション') do %>
<% end %>

オプションにはhttpメソッドなどを指定できます。
デフォルトだとhttpメソッドはgetになります。
実際の例は下記のようになります。

erb
1
2
3
4
<%= form_tag('/main', method: :post) do %> 
  <input type="text" name="nickname"> 
  <input type="submit"> 
<% end %>

実際に表示されるコードはこのように変換されます。

html
1
2
3
4
5
6
 <form action="/main" accept-charset="UTF-8" method="post">
     <input name="utf8" type="hidden" value="✓" />
     <input type="hidden" name="authenticity_token" value="※ここにはトークンが入ります" />
     <input type="text" name="nickname">
     <input type="submit">
 </form>

このように文字コードと不正な情報が投稿されるのを防ぐためトークンが自動で作成されているのが確認できます。
ですのでrailsでフォームを作成する際はこのようなform系のヘルパーメソッドを使用して作成します。
form_tagの引数にはパスとhttpメソッドなどのオプションを指定します。
ここに書くべき記述はどのように調べたら良いでしょうか?

newアクションは投稿フォームを表示するアクションです。
投稿された内容はデータベースに保存したいですよね。
ということは次に動かすべきアクションは何になるでしょうか?

そうですね、createアクションで投稿した内容をデータベースに保存したいですね。
ということはパスとhttpメソッドはmainコントローラーのcreateアクションを動かすよう指定してあげれば良さそうです。
rake routesコマンドで調べてみましょう。

shell
1
POST   /main(.:format)              main#create

上のように書いてあるのが確認できると思います。
そうするとパスは「/main」、httpメソッドはPOSTであることがわかります。
なので上のように「<%= form_tag('/main', method: :post) do %>」と書くということになります。

アクション名で記述してみよう
リンクをコピーしました

form_tagですがパスとhttpメソッドで次に動かすアクションを指定できましたが、直接コントローラー名とアクション名を指定することもできます。

erb
1
2
3
4
<%= form_tag({controller: :main, action: :create}, { method: :post}) do %>
  <input type="text" id="name">
  <input type="submit">
<% end %>

form_tagでのスタイルの当て方
リンクをコピーしました

form_tagでcssのclassを設定する場合は下記のように記述します。

erb
1
2
3
4
<%= form_tag('/main', method: :post, class: "hoge") do %>
  <input type="text" id="name">
  <input type="submit">
<% end %>

form_forとform_tagの違い
リンクをコピーしました

railsにはform_tagの他にform_forといったヘルパーメソッドも用意されています。
一般的に投稿フォームで投稿した内容が保存されるデータベースが存在する時にはform_forを使い、検索フォームなど投稿フォームに入力した内容が保存されない場合はform_tagを使用します。

まとめ

form_tagは簡単に入力フォームを作成できるヘルパーメソッドで、主に検索時などデータを特定のアクションに送りたい時に使うと覚えておきましょう。