Help us understand the problem. What is going on with this article?

これだけは押さえておくべきRailsのform_forの使い方

はじめに

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 %>

上のコードで以下のような入力フォームが作成できます。
スクリーンショット 2019-10-22 15.44.52.png

使い方

基本的な使い方は以下になります。

<%= 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以上はその他ってどれだけ低い人たちを想定しているんでしょうね笑)
表示は以下のようになりました。
スクリーンショット 2019-10-22 16.13.45.png

このようにselectを使用すると、項目を指定して選択肢を作成することができます。

submitについて

Railsでは(上記のコードの例にある)@userが新しく作られた時は、createアクションを呼び出し、編集された時はupdateアクションを自動的に呼び出します。

  • 新規作成ページではcreateが呼び出される
  • 編集ページではupdateが呼び出される

という認識でいいかと思います。

またボタンに表示したい文字を指定することもできます。

参考

【Rails/選択ボックス】selectを使って選択ボックスを作る方法
【Rails】フォームタグをform_forでやるときのセレクトボックスの作り方

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした