2
2

More than 1 year has passed since last update.

【Rails】form_withについて

Last updated at Posted at 2021-12-23

form_withとは

railsで情報を送信するためのヘルパーメソッド。 form_withを使うことにより、簡単に入力フォームに必要なHTMLを作成することができる。

form_withの使い方

<%= form_with(モデル or URL(パス),[スコープ],[オプション]) do |f| %>
  フォームの中身
<% end %>

モデル
@user@postなどモデルオブジェクトを入れる場合に使う。

URL
URLを指定する場合に使う。

スコープ
formのフィールド名にスコープを追加する場合に使う。

オプション
送信先のurlやタグの設定(クラスをつけたり、MIMEタイプを指定したり)

モデルとurlの使い分け
・モデル: データベースに保存する時(登録フォームなど)
・URL: 入力された情報をデータベースに保存しない時(ログインフォームなど)

form_withメソッドの便利な機能

form_withには、モデル(:model)で記述した場合の便利な機能がある。

引数として渡されたモデルクラスのインスタンスに中身が入っているか否かで、フォーム送信後のアクションを create か update に自動的に振り分けてくれる

インスタンスに中身が入っていない場合はcreateアクションへ、中身が入っている場合はupdateアクションへ処理を振り分けてくれる非常に便利な機能。

簡単に言うとモデルは中身が入っていると自動でeditメソッドを呼び出される。

form_withでよく使われるメソッド

メソッド名 役割
label ラベルテキスト
check_box チェックボックス
password_field パスワード入力フィールド
submit 送信ボタン
text_area 複数行入力テキストエリア
text_field テキスト入力フィールド

localオプション
上記の表以外にもまだオプションはあるが、よく使うlocalオプションだけ少し違うので補足。

:localはリモート送信(Ajax通信のような非同期通信)によるフォームの送信の有効・無効を設定するオプション。

JavaScriptでAjax通信によるフォームの送信を実装する場合などは、何も記述しなくてOK。

逆に、ブラウザの読み込みをするような同期通信を実装する場合は、local: trueと記述して、リモート送信をオフにする。

記入例

・URLを指定する場合

<%= form_with url: users_path do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

・モデルを指定する場合

<%= form_with model: @user do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

・スコープを設定する場合

<%= form_with url: users_path, scope: :scope1 do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

・オプションを設定する場合

<%= form_with url: users_path, class: "form_class", local: true do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

参考記事

【Rails】 form_withの使い方を徹底解説!
Rails:form_withのオプションや特徴について整理
form_withでのmodelとurlの指定の違いは?
Ruby on Railsでform_withを使う方法を現役エンジニアが解説【初心者向け】

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2