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

🐹 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍