初学者の備忘録
初学者の備忘録です。今回はForm_withヘルパー編
フォームヘルパーとは
入力のためのフォームを作成するためにHTMLにはフォームタグというタグが存在する。
Railsのヘルパーメソッド「フォームヘルパー」を用いて、フォームタグを生成できる。
フォームヘルパーには３種類存在します。簡単に説明すると
・form_tag・・・入力フォームのレイアウトだけ作る
・form_for・・・form_withと内容はほとんど同じ。ただ、HTTPメソッドを定義してあげる必要があるのでアレンジができる
・form_with・・・form_forを楽に記述できるようにしたもの。HTTPメソッドを省略することができるが、ルーティングでonlyで囲めるような基本的なHTTPメソッドしか使えない。
になります。詳しくは参考資料をご確認ください。
今回はform_withを使用した入力フォームの実装方法になります
実装
それではfrm_withを使用した入力フォームを作成していきます。
【１】 基本
基本的なコードはこちらになります。
<%= form_with model: 変数, url: 送信先, local: true do |f| %>
<% end %>
JavaScriptを使用しなくて、非同期にもしなくていい場合はlocal: trueは記述しなくていいです。
【２】 フォーム
form_withで囲むようにフォームの部品を囲んでいきます。基本的な書き方はこちらです。
<%= form_with model: 変数, url: 送信先, local: true do |f| %>
<div class="form-group">
# 表示名
<%= f.label :カラム名, '表示名' %>
# 入力フォーム
<%= f.フォーム部品 :カラム名 %>
</div>
<% end %>
必要に応じて変えましょう。
【３】 ヒント
入力フォームに時々ヒント情報が含まれている時がありますよね。それを実装してみたいと思います。
<%= form_with model: 変数, url: 送信先, local: true do |f| %>
<div class="form-group">
# 表示名
<%= f.label :カラム名, '表示名' %>
# 入力フォーム
<%= f.フォーム部品 :カラム名, placeholder: "ヒント" %>
</div>
<% end %>
placeholder:を追加するだけでできますのでおすすめです。
おまけ
ちなみに私は下記のようなコードを基本に多少bootstrapでアレンジするくらいです。
<div class="form-group">
<%= f.label :おまけ %>
<%= f.text_field :sect, placeholder: "ヒント", class: "form-control" %>
</div>
<div>
<%= f.submit "投稿", class: "btn btn-info btn-block mb-5" %>
</div>
上記のようなコードだと下記のような見た目になります。
【４】 コントローラー
次はコントローラーの記述をしていきます。私が実際に実装したコードを例として進めていきます。
：
：
def new
# 空の変数作成
@place = Place.new
end
def create
# 許可されたデータが変数に格納
@place = Place.new(place_params)
# 保存が成功した場合
if @place.save
# フラッシュメッセージを表示して詳細ページへ遷移
redirect_to admin_place_path(@place), notice: "投稿されました"
# それ以外の場合（失敗した場合）
else
# 新規投稿ページへ遷移
render :new
end
end
：
：
この時にバリデーションを設定しておくと便利です。データが送られているのかどうかの判断がしやすくなるからです。
最後に
以上がform_withを使用した入力フォーム作成になります。
入力フォームの種類によっては苦戦したところもあるので、別枠で投稿していきたいです。それとフォームは新規投稿と編集で使うことが多いのですが、まとめて一つの部分テンプレートにもできるみたいなのでそれもまた整理ができたら投稿します。
それではお疲れ様でした。