【初心者向け】Railsにおけるフォーム関連のビューヘルパー
こんにちは
Railsには様々なヘルパーメソッドがあらかじめ用意されていますが、今回はフォーム関連のビューヘルパーについて紹介・説明を行っていきたいと思います。目次から使用したいメソッド名を選択してみてください。
目次
form_tagメソッド（汎用的なフォーム）
form_tagメソッドはモデルの編集に関与しないものに使われることが多い入力フォームです。よく検索フォームなどに使われています。新規登録や投稿したものの編集以外で用いられることが多いです。
書き方は以下を参考に
| 構文 form_tagメソッド |
|---|
| form_tag([url_opts [,opts]]) do …body… end |
| url_opts:リンク先のURL , opts:要素の属性(表1を参照) , body:フォームの中身 |
【表1 form_tagメソッドのオプション】
| method | フォーム送信時に使用するHTTPメソッド |
|---|---|
| multipart | ファイルのアップロード時に使用する |
| id , classなど | その他の<form>要素に付与するオプション |
【具体的なコード】
<label for = “keyword”>検索キーワード: </label>
<%= text_field_tag :keyword, ‘ ‘ , size: 30 %>
<%= submit_tag ‘検索’ %>
<% end %>
検索フォームの一例です。
form_forメソッド（モデル編集のためのフォーム）
こちらの使用方法はform_tagメソッドと少し似ていますが中身が少し違う点に注意しましょう。form_forメソッドは主に特定のモデルの編集を行う時に用います。例えば新規登録や新規投稿、投稿したものの編集などです。
書き方は以下を参考に
| 構文 form_forメソッド |
|---|
| form_for(var [,opts]) do |f| …body… end |
| var:モデルオブジェクト , opts:動作オプション(表2を参照) , body:フォームの中身 |
【表2 form_forメソッドのオプション】
| url | フォームの送信先 |
|---|---|
| html | その他の<form>要素属性情報 |
【具体的なコード】
<%= form_for (@hoge) do |f| %>
<%= f.label :hoge %>
<%= f.text_field :hope %>
<% end %>
※hogeの部分は自分で生成したモデル名が入ります。
これまでに紹介したformメソッドに付随してinput, text_areaを生成するメソッドです。formメソッドが入力formの大枠だとしたら、これらのメソッドはその中身です。本文や送信ボタン、カテゴリーなどの選択ボックスなどがこれに当たります。
書き方は以下を参考にしてください。
| XXXX_field(obj, prop [,opts])
text_area(obj, prop [,opts]) radio_button(obj, prop [,opts]) check_box(obj, prop [,opts][,checked = “1”[,unchecked = “0”]]) |
|---|
| obj:オブジェクト名, prop:プロパティ名, opts:<input>/<text_area>の要素の属性, value:value属性の値, checked/unchecked:チェック/非チェック時のvalue属性 |
selectメソッド（リストボックスを作る）
選択ボックスまたはリストボックスを利用する場合によく用いるのがこのselectメソッド。シンプルで扱いやすいのが特徴です。
書き方は以下の通り
| select(obj, prop, choices [,opts [,html_opts]]) |
|---|
| obj:オブジェクト名, prop:プロパティ名, choices:<option>要素の情報, 動作オプション, html_opts:<select>要素の属性 |
【表3 selectメソッドのオプション】
| include_blank | からのオプションを先頭に追加するか |
|---|---|
| disabled | 無効にするオプション（文字列または配列） |
| selected | 選択されたオプション（オブジェクトの値とは異なる値を選択させたい時） |
【具体的なコード】
<%= form_for (@hoge) do |f| %>
<%= f.select :publish , [‘ hogezo ‘, ‘ hogemaru ‘, ‘ hogeta ‘], { include_blank: ‘ 選択してください ‘ } %>
<% end %>
※hogeの部分は自分で生成したモデル名が入ります。セレクトボックスの中身は自分でアレンジしてね。
collection_selectメソッド（データベースの情報をもとに選択肢を作る）
こちらもリストボックスを作成するのですが、<option>要素の情報をデータベースの値をもとに生成します。
viewファイルとは別に選択肢を定義しておくことでviewの記述が簡略化できるという特徴があります。とても見やすいので多くの場合、こちらを使うことが多いでしょう。
書き方は以下の通り
| collection_select(obj, prop, collection, value, text [,opts [,html_opts]]) |
|---|
| obj:オブジェクト名, prop:プロパティ名, collection:<option>要素のもととなるオブジェクト配列, value: オブジェクトでvalue属性に割り当てられる項目, text: オブジェクトでテキストに割り当てられる項目, 動作オプション, html_opts:<select>要素の属性 |
【具体的なコード】
<%= form_for (@hoge) do |f| %>
<%= f.collection_select :publish , @hoges :publish, :publish %>
<% end %>
※hogeの部分は自分で生成したモデル名が入ります。@hogesはあらかじめ用意している要素のもとです。
以上が僕がよく使うform関連のviewヘルパーです。文字だけだと中々わかりにくいと思うので実際にコードを打ちながら見ていくようにしていきましょう。他にもたくさんviewヘルパーが存在しますので、上記したものを使い慣れてきたら手を出してみるといいかもしれません。
Follow me!
