【Rails】 form_forの使い方をマスターしよう！

1
2
3
<%= form_for('モデルクラスのインスタンス') do |f| %>
  <%# フォーム内容 %>
<% end %>

1
2
3
<%= form_for('モデルクラスのインスタンス') do |f| %>
  フォーム内容
<% end %>

1
2
3
4
<%= form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

1
2
3
4
5
6
<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓" />
  <input type="hidden" name="authenticity_token" value="※ここにはトークンが入ります" />
  <input type="text" name="user[text]" id="user_text" />
  <input type="submit" name="commit" value="Create User" />
</form>

1
2
3
def new
  @user = User.new
end

1
2
3
4
5
6
7
8
9
def new
  @user = User.new
end
# 新規に作成したレコードなのでcreateアクションが動く

def edit
  @user = User.find(params[:id])
end
# 既存のレコードを取得しているのでupdateアクションが動く

1
2
3
resources :articles do
    resources :comments
end

1
2
3
4
def new
  @article = Article.find(params[:article_id])
  @comment = Comment.new
end

1
2
3
4
<%= form_for [@article, @comment] do |f| %>
  <%= f.text_field :text %>
  <%= f.submit %>
<% end %>

1
2
3
4
5
# create時の例
<form class="new_comment" id="new_comment" action="/articles/1/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" />

# update時の例
<form class="edit_comment" id="edit_comment_1" action="/articles/1/comments/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" />

1
<%= form_for @user , html: {属性: ‘属性値'} do |f| %>

1
<%= form_for @user, html: {id: 'new_form'} do |f| %>

1
2
3
4
<%= form_for(@user, url: {controller: 'users', action: 'index' }) do |f| %>
  <%= f.text_field :text %>
  <%= f.submit %>
<% end %>

1
2
3
# 例:form_tagの場合
params
=> {"name"=>"テスト太郎"}

1
2
3
# 例:form_forの場合
 params
=> {"user"=>{"name"=>"テスト太郎" }}

1
2
3
params.require(:user)
# 下記の内容が取得できる
{"name"=>"テスト太郎" }

1
2
3
4
<%= form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

1
<%= f.text_field :name, class: "hoge", size: 30 %>

1
<%= f.text_area :name, class: "hoge", size: "30x10" %>

1
<%= f.number_field :age, class: "hoge", min: 0, max: 1 %>

1
<%= f.check_box :保存するカラム名 ,{オプション}, "チェック時の値", "未チェック時の値" %>

1
Check box: <%= f.check_box :sex ,{}, "true", "false" %>

1
Check box: <%= f.check_box :sex ,{ class: "hoge" }, "true", "false" %>

1
<%= f.check_box :sex, { checked: true }, "true", "false" %>

1
<%= f.check_box :配列名, { multiple: true }, "チェック時の値", nil %>

1
2
3
4
<p>ユーザー1: <%= f.check_box :user_ids ,{ multiple: true }, 1, nil %></p>
<p>ユーザー2: <%= f.check_box :user_ids ,{ multiple: true }, 2, nil %></p>
<p>ユーザー3: <%= f.check_box :user_ids ,{ multiple: true }, 3, nil %></p>
<p>ユーザー4: <%= f.check_box :user_ids ,{ multiple: true }, 4, nil %></p>

1
2
3
4
<p>ユーザー1: <%= f.check_box :user_ids ,{ multiple: true }, 1 %></p>
<p>ユーザー2: <%= f.check_box :user_ids ,{ multiple: true }, 2 %></p>
<p>ユーザー3: <%= f.check_box :user_ids ,{ multiple: true }, 3 %></p>
<p>ユーザー4: <%= f.check_box :user_ids ,{ multiple: true }, 4 %></p>

1
"user"=>{"user_ids"=>["0", "1", "0", "2", "0", "3", "0", "4"]}

1
<%= f.check_box :配列名, { multiple: true, include_hidden: false }, "チェック時の値" %>

1
2
3
4
<p>ユーザー1: <%= f.check_box :user_ids ,{ multiple: true, include_hidden: false }, 1 %></p>
<p>ユーザー2: <%= f.check_box :user_ids ,{ multiple: true, include_hidden: false }, 2 %></p>
<p>ユーザー3: <%= f.check_box :user_ids ,{ multiple: true, include_hidden: false }, 3 %></p>
<p>ユーザー4: <%= f.check_box :user_ids ,{ multiple: true, include_hidden: false }, 4 %></p>

1
"user"=>{"user_ids"=>["1", "2", "3", "4"]}

1
<%= f.collection_check_boxes(保存されるカラム名, オブジェクトの配列, カラムに保存される項目, チェックボックスに表示されるカラム名 ) %>

1
<%= f.collection_check_boxes :user_ids, User.all, :id, :name %>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="hidden" name="group[user_ids][]" value="" />
<input type="checkbox" value="1" name="group[user_ids][]" id="group_job_ids_1" />
<label for="group_job_ids_1">programan</label>
<input type="checkbox" value="2" name="group[job_ids][]" id="group_job_ids_2" />
<label for="group_job_ids_2">programan_father</label>
<input type="checkbox" value="3" name="group[job_ids][]" id="group_job_ids_3" />
<label for="group_job_ids_3">programan_mother</label>
<input type="checkbox" value="4" name="group[job_ids][]" id="group_job_ids_4" />
<label for="group_job_ids_4">programan_bigsister</label>
<input type="checkbox" value="5" name="group[job_ids][]" id="group_job_ids_5" />
<label for="group_job_ids_5">programan_sister</label>
<input type="checkbox" value="6" name="group[job_ids][]" id="group_job_ids_6" />
<label for="group_job_ids_6">programan_bigbrother</label>
<input type="checkbox" value="7" name="group[job_ids][]" id="group_job_ids_7" />
<label for="group_job_ids_7">programan_brother</label>

1
2
params
=> "group"=>{"name"=>"ピカわか", "user_ids"=>["", "1", "5", "7"]}

1
2
3
def user_params
 params.require(:group).permit(:name, { user_ids: [] })
end

1
<%= f.radio_button "保存されるカラム名", "カラムに保存される内容" %>

1
<%= f.radio_button :sex, "男" %>男 <%= f.radio_button :sex, "女" %>女

1
性別：<%= f.radio_button :sex, 0 %>男<%= f.radio_button :sex, 1, checked: true %>女

1
<%= f.select :保存されるカラム名, [ ["表示される文字","保存される値"], ["表示される文字","保存される値"], {オプション}, {htmlオプション} ] %>

1
<%= f.select :job_id, [ ["プログラマン講師",1], ["家電メーカー", 2], ["主婦", 3 ] ,["保育士", 4], ["学生", 5], ["営業", 6] ], prompt: "職業を選択してください", class: "hoge" %>

1
<%= f.select :job_id, [ ["プログラマン講師",1], ["家電メーカー", 2], ["主婦", 3 ] ,["保育士", 4], ["学生", 5], ["営業", 6] ], prompt: "職業を選択してください",  { class: "hoge", id: "fuga" } %>

1
2
3
4
5
6
7
8
9
<select name="user[job_id]" id="user_job_id">
<option value="">職業を選択してください</option>
<option value="1">プログラマン講師</option>
<option value="2">家電メーカー</option>
<option value="3">主婦</option>
<option value="4">保育士</option>
<option value="5">学生</option>
<option value="6">営業</option>
</select>

1
2
params
=> "user"=><ActionController::Parameters {"job_id"=>"1"} permitted: false>

1
<%= f.collection_select(保存されるカラム名, オブジェクトの配列, カラムに保存される項目, 選択肢に表示されるカラム名, {オプション}, {htmlオプション} ) %>

1
2
3
def new
  @jobs = Job.all
end

1
<%= f.collection_select(:job_id, @jobs, :id, :name ) %>

1
<%= f.collection_select(:job_id, @jobs, :id, :name, {prompt: "表示するメッセージ"}) %>

1
<%= f.collection_select(:job_id, @jobs, :id, :name, { }, {class: "hoge"}) %>

1
2
3
4
5
6
7
8
<select class="hoge" name="user[job_id]" id="user_job_id">
<option value="">表示するメッセージ</option>
<option value="1">プログラマン講師</option>
<option value="2">家電メーカー</option>
<option value="3">主婦</option>
<option value="4">保育士</option>
<option value="5">学生</option>
<option value="6">営業</option></select>

1
<%= f.file_filed :保存されるカラム名 %>

1
2
<%= f.label :カラム名, for: “属性値”, class: “fa fa-アイコン名” do %>
<%= f.file_field :カラム名, 属性: “属性値”, style: "display: none;" %>

1
2
<%= f.label :image, for: “file-input”, class: “fa fa-file-picture-o” do %>
<%= f.file_field :image, id: “file-input”, style: "display: none;" %>

1
<%= f.date_select :カラム名, {オプション名: 値} %>

1
2
#値をtrueにする
<%= f.date_select :カラム名, {discard: true} %>

1
2
3
4
5
#開始年を1990年に指定
<%= f.date_select :カラム名, {start_year: 1990} %>

選択できる年を1990から2100に指定
<%= f.date_select :カラム名, {start_year: 1990, end_year: 2100} %>

1
2
#最初の選択を2000年1月1日にする。
<%= f.date_select :カラム名, default: { year: 2000, month: 1, day: 1 } %>

1
<%= f.hidden_field :カラム名, value: "値" %>

1
<%= f.hidden_field :user_id, value: current_user.id %>

1
<%= f.hidden_field 'モデル名[user_ids][]', value: current_user.id) %>

1
<%= f.hidden_field 'group[user_ids][]', value: current_user.id) %>

1
<input value="1" type="hidden" name="group[group[user_ids][]]" id="group_group[user_ids][]" />

1
<%= hidden_field_tag :カラム名, 値 %>

1
<%= hidden_field_tag :user_id, current_user.id %>

1
2
3
4
5
<%= form_for @user do |f| %>
  <%= f.text_field :name %>
  <%= hidden_field_tag :user_id, current_user.id %>
  <%= f.submit "送信" %>
<% end %>

1
2
3
4
5
# nameを取得する場合
params[:user][:name]

# user_idを取得する場合
params[:user_id]

1
<%= f.submit "ボタンの名前" %>

1
<%= f.submit "送信" %>

1
2
3
4
def new
    @user = User.new
    @jobs = Job.all
end

1
2
3
4
5
6
7
8
9
10
11
<div class='content'>
    <%= form_for @user do |f| %>
    <%= f.text_field :name %>
    <%= f.collection_select :job_id, @jobs, :id, :name %>
    <%= f.number_field :sex %>
    <%= f.number_field :age %>
    <%= f.number_field :tall %>
    <%= f.number_field :weight %>
    <%= f.submit "送信" %>
    <% end %>
</div>

1
2
3
4
5
6
7
8
9
10
11
<div class='content'>
    <%= form_for @user do |f| %>
    <%= f.text_field :name %><br>
    <%= f.collection_select :job_id, @jobs, :id, :name %><br>
    <%= f.number_field :sex %><br>
    <%= f.number_field :age %><br>
    <%= f.number_field :tall %><br>
    <%= f.number_field :weight %><br>
    <%= f.submit "送信" %>
    <% end %>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓" />
  <input type="hidden" name="authenticity_token" value="eShsYZ2AAknx2Ik2bIGVduAKQRIDwWtMpcuIgoQq3HwhAxLxhg02d3QAFTvTaW+OzaPajFLzsu4aH512aoTfQw==" />
  <input type="text" value="" name="user[name]" id="user_name" />
  <select name="user[job_id]" id="user_job_id">
  <option value="1">プログラマン講師</option>
  <option value="2">家電メーカー</option>
  <option value="3">主婦</option>
  <option value="4">保育士</option>
  <option value="5">学生</option>
  <option value="6">営業</option>
  </select>
  <input type="number" name="user[sex]" id="user_sex" />
  <input type="number" name="user[age]" id="user_age" />
  <input type="number" name="user[tall]" id="user_tall" />
  <input type="number" name="user[weight]" id="user_weight" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

1
2
<%= f.label :name %>
<%= f.text_field :name %>

1
2
<%= f.label :name, "名前：" %>
<%= f.text_field :name %>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class='content'>
    <%= form_for @user do |f| %>
        <%= f.label :name, "名前：" %>
        <%= f.text_field :name %><br>
        <%= f.label :job_id, "職業：" %>
        <%= f.collection_select :job_id, @jobs, :id, :name %><br>
        <%= f.label :sex, "性別：" %>
        <%= f.number_field :sex %><br>
        <%= f.label :age, "年齢：" %>
        <%= f.number_field :age %><br>
        <%= f.label :tall, "身長：" %>
        <%= f.number_field :tall %><br>
        <%= f.label :weight, "体重：" %>
        <%= f.number_field :weight %><br>
        <%= f.submit "送信" %>
    <% end %>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓" />
  <input type="hidden" name="authenticity_token" value="nH1so7B0iPzSjGR7Gm8/lWH9q4bNDamGw1ej5560IYjEVhIzq/m8wldU+Halh8VtTFQwGJw/cCR8g7YTcBoitw==" />
        <label for="user_name">名前：</label>
        <input type="text" value="" name="user[name]" id="user_name" /><br>
        <label for="user_job_id">職業：</label>
        <select name="user[job_id]" id="user_job_id">
          <option value="1">プログラマン講師</option>
          <option value="2">家電メーカー</option>
          <option value="3">主婦</option>
          <option value="4">保育士</option>
          <option value="5">学生</option>
          <option value="6">営業</option></select><br>
        <label for="user_sex">性別：</label>
        <input type="number" name="user[sex]" id="user_sex" /><br>
        <label for="user_age">年齢：</label>
        <input type="number" name="user[age]" id="user_age" /><br>
        <label for="user_tall">身長：</label>
        <input type="number" name="user[tall]" id="user_tall" /><br>
        <label for="user_weight">体重：</label>
        <input type="number" name="user[weight]" id="user_weight" /><br>
        <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class UsersController < ApplicationController
    def new
        @user = User.new
        @jobs = Job.all
    end

    def create
        User.create(user_params)
        redirect_to root_path
    end

    private
    def user_params
        params.require(:user).permit(:name, :job_id, :sex, :age, :tall, :weight)
    end
end

1
params.permit(:name, :job_id, :sex, :age, :tall, :weight)

1
params.require(:user).permit(:name, :job_id, :sex, :age, :tall, :weight)

1
gem 'pry-rails'

1
2
3
4
5
def create
  User.create(user_params)
    binding.pry
    redirect_to root_path
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[1] pry(#<UsersController>)> params
=> <ActionController::Parameters 
{
  "utf8"=>"✓",  "authenticity_token"=>"P9L/zj5tIU3+L3cUv7kvFRbX34RET0rwbMymMf8/9P6shtNnJ8UejzDmax2t59nG6gdhnYBzA7n3JspBE/UuvQ==",
  "user"=><ActionController::Parameters 
  {
    "name"=>"テスト太郎",
    "job_id"=>"1",
    "sex"=>"0",
    "age"=>"60",
    "tall"=>"155",
    "weight"=>"50"
  }permitted: false>,
  "commit"=>"送信",
  "controller"=>"users",
  "action"=>"create"
    } permitted: false>

1
2
3
4
5
6
7
8
9
10
11
12
13
[1] pry(#<UsersController>)> params
=> <ActionController::Parameters {
  "utf8"=>"✓", "authenticity_token"=>"SAf1Hfm/9XLsmT+PlH7auww2dNicdQ9lmx9qkjWzBJ7bU9m04BfKsCJQI4aGICxo8ObKwVhJRiwA9Qbi2Xne3Q==",
  "name"=>"テスト二郎",
  "job_id"=>"1",
  "sex"=>"0",
  "age"=>"50",
  "tall"=>"155",
  "weight"=>"50",
  "commit"=>"送信",
  "controller"=>"users",
  "action"=>"create"
} permitted: false>

1
2
3
def create
  User.create(name: params[:user][:name], job_id: params[:user][:job_id], sex: params[:user][:sex], age: params[:user][:age], tall: params[:user][:tall], weight[:user][:tall])
end

1
2
3
4
5
6
7
8
9
[1] pry(#<UsersController>)> params.require(:user)
=> <ActionController::Parameters {
  "name"=>"テスト太郎",
    "job_id"=>"1",
    "sex"=>"0",
    "age"=>"50",
    "tall"=>"160",
    "weight"=>"55"
    } permitted: false>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# requireメソッドを使わない時
def create
  User.create(name: params[:user][:name], job_id: params[:user][:job_id], sex: params[:user][:sex], age: params[:user][:age], tall: params[:user][:tall], weight[:user][:tall])
end

# ストロングパラメーターでrequireメソッドとpermitメソッドを使用した時
def create
    User.create(user_params)
end

private
def user_params
    params.require(:user).permit(:name, :job_id, :sex, :age, :tall, :weight)
end