Railsのフォームヘルパー

Ruby on Railsでフォームの簡単な使い方の紹介です。
Railsでは、Action Viewのフォームヘルパーを使うことで簡単に記述できます。

🍮 フォームのサンプルコード

記事(Article)の新規作成フォームのサンプルを紹介します。まずControllerです。

def new
  @article = Article.new
end

View側では次のように記述します。

<%= form_for @article, do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.text_area :body, size: 60x12 %>
  <%= f.submit create %>
<% end %>

上記のViewから次のHTMLが生成されます。

<form accept-charset=UTF-8 action=/articles/create method=post>
  <label for=article_title>タイトルlabel>
  <input id=article_title name=article[title] type=text />
  <textarea id=article_body name=article[body] cols=60 rows=12>textarea>
  <input name=commit type=submit value=Create />
form>

View側のコードの概要を説明します。

要素	説明
`form_for @article`	@articleからフォーム要素を生成
`f.label`	対応するラベルを生成
`f.text_field`	テキストの入力フォームを生成
`f.text_area`	テキストエリアの入力フォームを生成
`f.submit`	送信ボタンを生成

🐡 フォーム要素の生成

form_forメソッドでフォーム要素を生成します。

<%= form_for(@book, url: 'http: example.com', html: {method: 'get'}) %>

オプションでURLを渡してFormの渡す先を指定したり、html: { method: GET }などでGETやPOSTを指定できます。

🎳 セレクトボックス

セレクトボックス(タグ)のオプションに配列を渡すf.selectのサンプルです。

<%= f.select(:sex, [['Male', 1], ['Female', 2]]) %>

🍄 コレクションに対してセレクトボックスを生成

セレクトボックス(タグ)を生成するf.collection_selectのサンプルです。

<%= f.collection_select(:prefecture_id, Prefecture.all, :id, :name) %>

これは:city_id要素に対してセレクトボックスを生成します。
Cityのすべての要素を取得し、valueにid、テキストにnameを入れた選択肢を作ります。

出力されるHTMLは次のようになります。

<select id=person_prefecture_id name=person[prefecture_id]>
  <option value=1>北海道option>
  <option value=2>青森option>
select>

🎉 チェックボックス

チェックボックス(タグ)を生成するf.check_boxのサンプルです。

<%= f.check_box 'agreement', {:checked => true}, true, false %>

出力されるHTMLは次のようになります。

<input name="page[freezeflag]" type="hidden" value="false" />
<input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

🎂 テキストボックス

テキストボックス(タグ)を生成するf.text_fieldのサンプルです。

<%= f.text_field :name %>

出力されるHTMLは次のようになります。

<input id="page_name" name="page[name]" size="30" type="text" />

🐞 補足：エラーがあるときだけinput直下にエラーメッセージを表示

inputフォームをバリデーションしてエラーがあるときだけエラーメッセージを表示させたい場合は、config/application.rbに次のように記述します。

config.action_view.field_error_proc = Proc.new do |html_tag, instance|
  if instance.kind_of?(ActionView::Helpers::Tags::Label)
    # skip when label
    html_tag.html_safe
  else
    "#{html_tag}#{instance.error_message.first}
".html_safe
  end
end