はじめに
form_forを初めて使う向けに（かつ自分の備忘録として）、基本的な使い方を書きます。
form_forとは
Webアプリにてデータなどを打ち込む入力欄があると思います。form_forを使えば、その入力フォームを簡単に作成することができます。
form_forを使うことで、入力フォームを作成でき、編集や更新のボタンまでセットで作ることができます。
基本的な使い方
まずは実装例
下記にコード例を示します。書いてるコード量は多いですがきちんと説明を入れていきます。
<h2 class="title">プロフィール編集</h2>
<%= form_for @user do |f| %>
<%= f.hidden_field :password, :value => @user.password %>
<%= f.hidden_field :password_confirmation, :value => @user.password_confirmation %>
<!-- 名前編集 -->
<div class="form-group">
<%= f.label :名前, class: 'text-black' %>
<%= f.text_field :name, class: 'form-control' %>
</div>
<!-- メールアドレス編集 -->
<div class="form-group">
<%= f.label :メールアドレス, class: 'text-black' %>
<%= f.text_field :email, class: 'form-control' %>
</div>
<!-- 身長編集 -->
<div class="form-group row">
<%= f.label :height, '身長 ', class:'col-md-3 col-form-label' %>
<div class="col-md-1">
<%= f.select :height, [['-', '-'], ['150cm未満', '150cm未満'], ['150〜155cm', '150〜155cm'], ['155〜160cm', '155〜160cm'], ['160〜165cm', '160〜165cm'], ['165〜170cm', '165〜170cm'], ['170〜175cm', '170〜175cm'], ['175〜180cm', '175〜180cm'], ['180〜185cm', '180〜185cm'], ['185〜190cm', '185〜190cm'], ['190〜195cm', '190〜195cm'], ['195〜200cm', '195〜200cm'] ]%>
</div>
</div>
<!-- 体重編集 -->
<div class="form-group row">
<%= f.label :weight, '体重 ', class:'col-md-3 col-form-label' %>
<div class="col-md-1">
<%= f.select :weight, [['-', '-'], ['45kg未満', '45kg未満'], ['45〜50kg', '45〜50kg'], ['50〜55kg', '50〜55kg'], ['55〜60kg', '55〜60kg'], ['60〜65kg', '60〜65kg'], ['65〜70kg', '65〜70kg'], ['70〜75kg', '70〜75kg'], ['75〜80kg', '75〜80kg'], ['85〜90-kg', '85〜90-kg'], ['90〜95kg', '90〜95kg'], ['95〜100kg', '95〜100kg'], ['100kg超', '100kg超'] ] %>
</div>
</div>
<!-- 自己紹介 -->
<div class="form-group row">
<%= f.label :comment, '自己紹介(255文字まで) ', class:'col-md-3 col-form-label' %>
<div class="col-md-9">
<%= f.text_area :comment, class: "form-control", rows: "3", placeholder:"自己紹介記入欄
(例文)筋トレはじめました！よろしくお願いします！"
%>
</div>
</div>
<!-- プロフィール更新 -->
<%= f.submit "更新", class: 'btn-block' %>
<% end %>
上のコードで以下のような入力フォームが作成できます。
使い方
基本的な使い方は以下になります。
<%= form_for @user do |f| %>
<%= f.label :ラベルの名前 %>
<%= f.text_field オブジェクト名, プロパティ名 [, オプション] %>
<%= f.submit "ボタンに表示する文字" %>
<% end %>
text_fieldについて
ここで使用しているtext_fieldはform_forでよく使われるフォームの形のうちの一つです。
text_fieldは一行のテキストを入力できます。
他にもtext_areaや、email_field、number_fieldなどが存在します。
- 長い文章でなければtext_field
- 長い文章であればtext_area
- メールの形で入力させたい時はemail_field
- 数字のみ入力させたい場合はnumber_field
を使用すると覚えておけばひとまず安心だと思います。
selectについて
selectを使用すると、自分で用意した選択肢から項目を選択するフォームを作成することができるようになります。
公式リファレンスには以下のように書いてあります。
select(オブジェクト名, プロパティ名, タグの情報 [, オプション])
ですが、わかりにくいので実例で覚えていきましょう。
<%= f.select :height, [['150cm未満', '150cm未満'], ['150〜155cm', '150〜155cm'], ['155〜160cm', '155〜160cm'], ['それ以上', 'それ以上'] ]%>
見やすくするために選択肢を減らしました。
（160cm以上はその他ってどれだけ低い人たちを想定しているんでしょうね笑）
表示は以下のようになりました。
このようにselectを使用すると、項目を指定して選択肢を作成することができます。
submitについて
Railsでは（上記のコードの例にある）@userが新しく作られた時は、createアクションを呼び出し、編集された時はupdateアクションを自動的に呼び出します。
- 新規作成ページではcreateが呼び出される
- 編集ページではupdateが呼び出される
という認識でいいかと思います。
またボタンに表示したい文字を指定することもできます。
参考
【Rails/選択ボックス】selectを使って選択ボックスを作る方法
【Rails】フォームタグをform_forでやるときのセレクトボックスの作り方