こんにちは、hachi8833です。form_with
はRailsのビューでフォームを送信するためのヘルパーメソッドです。
Rails 5.1より前のform_for
やform_tag
はその後非推奨になりました。Rails 5.1以降はこのform_with
だけを使いましょう。
参考: Provide form_with as a new alternative to form_for/form_tag · Issue #25197 · rails/rails
概要
MITライセンスに基づいて翻訳・公開いたします。
- Rails 5.1 APIドキュメント(英語):
ActionView::Helpers::FormHelper#form_with
- Rails 6.0 APIドキュメント(英語):
ActionView::Helpers::FormHelper#form_with
- Rails 6.1 APIドキュメント(英語):
ActionView::Helpers::FormHelperform_with
- Rails 7.0 APIドキュメント(英語):
ActionView::Helpers::FormHelper#form_with
- Rails 7.1 APIドキュメント(英語):
ActionView::Helpers::FormHelper#form_with
- Rails 7.2 APIドキュメント(英語):
ActionView::Helpers::FormHelper#form_with
原文の更新や訳文の誤りにお気づきの方は、@hachi8833までお知らせください。
Rails 5.1〜7.2: 'form_with' APIドキュメント(翻訳)
# API呼び出し
form_with(model: nil, scope: nil, url: nil, format: nil, **options)
URL、スコープ、モデルの組み合わせを元にformタグを作成します。
訳注(Rails 7.1〜)
#50931でmodel
オプションにnil
を渡すことが非推奨化されました。Rails 8.0からはmodel
オプションにnil
を渡すとArgumentError
が発生します。
-form_with(model: nil, scope: nil, url: nil, format: nil, **options)
+form_with(model: false, scope: nil, url: nil, format: nil, **options, &block)
参考: 週刊Railsウォッチ20240221: form_with
のmodel
オプションにnil
を渡すことが非推奨化された
⚓ URLのみを指定する
<%= form_with url: articles_path do |form| %>
<%= form.text_field :title %>
<% end %>
# =>
<form action="/articles" method="post">
<input type="text" name="title" />
</form>
訳注(Rails 7〜)
<!-- Rails 6.1まで -->
<form action="/posts" method="post" data-remote="true">
Rails 6.1までの出力結果(上)にはdata-remote="true"
が含まれていますが、Rails 7の出力には含まれていません(下)。
<!-- Rails 7 -->
<form action="/posts" method="post">
意図的に空URLを渡す(Rails 7)
<%= form_with url: false do |form| %>
<%= form.text_field :title %>
<% end %>
# =>
<form method="post">
<input type="text" name="title" />
</form>
⚓ inputフィールド名にスコープのプレフィックスを追加する
<%= form_with scope: :article, url: articles_path do |form| %>
<%= form.text_field :title %>
<% end %>
# =>
<form action="/articles" method="post">
<input type="text" name="article[title]" />
</form>
⚓ 渡されたモデルからURLとスコープを自動推測する
<%= form_with model: Article.new do |form| %>
<%= form.text_field :title %>
<% end %>
# =>
<form action="/articles" method="post">
<input type="text" name="article[title]" />
</form>
⚓ 既存のモデルを更新するフォームで、モデルの値をフィールドに表示する
<%= form_with model: Article.first do |form| %>
<%= form.text_field :title %>
<% end %>
# =>
<form action="/articles/1" method="post">
<input type="hidden" name="_method" value="patch" />
<input type="text" name="article[title]" value="<the title of the article>" />
</form>
⚓ フォームのフィールドは、必ずしもモデルの属性と対応してなくてもよい
<%= form_with model: Cat.new do |form| %>
<%= form.text_field :cats_dont_have_gills %>
<%= form.text_field :but_in_forms_they_can %>
<% end %>
# =>
<form action="/cats" method="post">
<input type="text" name="cat[cats_dont_have_gills]" />
<input type="text" name="cat[but_in_forms_they_can]" />
</form>
フォームのパラメータは、コントローラでパラメータのネストに沿ってアクセスできます。つまり、inputフィールドにtitle
とarticle[title]
というフィールド名がある場合、コントローラではそれぞれparams[:title]
とparams[:article][:title]
としてアクセスできます。
フォームのinputフィールド名 | コントローラのparams |
---|---|
title |
params[:title] |
article[title] |
params[:article][:title] |
上述のコード例では、比較しやすさのため送信ボタンを省略しています。また、UTF-8サポートを有効にする自動生成のhidden
フィールドや、CSRF(Cross Site Request Forgery)保護に必要な認証トークンも省略しています。
⚓ リソース指向のスタイル
上述のコード例の多くでは、単にform_with
に:model
を渡しています。これはRESTfulなルーティングのセットに対応しており、そのほとんどはconfig/routes.rbのresources
で定義されます。
したがって、そうしたモデルのレコードを1件渡せば、RailsがURLやメソッドを推測します。
<%= form_with model: @article do |form| %>
...
<% end %>
上のコードは以下のようなコードと同等になります。
<%= form_with scope: :article, url: article_path(@article), method: :patch do |form| %>
...
<% end %>
新規レコードについても同様です。
<%= form_with model: Article.new do |form| %>
...
<% end %>
上のコードは以下のようなコードと同等になります。
<%= form_with scope: :article, url: articles_path do |form| %>
...
<% end %>
⚓ #form_with
で利用できるオプション
:url
- フォームの送信先URLを指定します。
渡せる値は、url_for
やlink_to
で渡せる値と似ています。たとえば、名前付きルートを直接渡すこともできますし、:url
なしで:scope
を渡すと、現在のURLにフォームを送信することもできます。 :method
- フォーム送信時のHTTPメソッド(verb)を指定します。
通常は:get
や:post
を指定します。
:patch
、:put
、:delete
を指定すると、隠しinput名の後ろに_method
が追加され、POST
verb上でこれらのHTTP verbをシミュレートします。 :format
- フォーム送信先であるルーティングのフォーマットを指定します。
:json
など通常と異なるリソースタイプを送信するのに便利です。
:url
がオプションに渡されている場合、このオプションはスキップされます。 :scope
- inputフィールド名のプレフィックスにスコープを追加します。これにより、送信されたパラメータをコントローラでグループ化できます。
:namespace
- フォームの要素でid属性を一意にする名前空間です。
namespace
属性で指定した名前にアンダースコアを追加したものが、生成されたHTML idの前に追加されます。 :model
:url
や:scope
の自動推測に使うモデルオブジェクトを指定し、inputフィールドにモデルの値を表示します。
たとえば、title
属性の値が"Ahoy!"
ならtitle
の入力フィールドの値に"Ahoy!"
と表示されます。
モデルが新しいレコードの場合は作成用フォームが生成され、モデルが既存のレコードの場合は更新用フォームが生成されます。
デフォルトの動作を上書きするには、:scope
か:url
を渡します(params[:article]
をparams[:blog]
に変更するなど)。:authenticity_token
- フォームで使う認証トークンを指定します。
カスタムの認証トークンを指定して上書きすることも、false
を渡して認証トークンのフィールドをスキップすることもできます。
有効なフィールドのみに制限されている支払用ゲートウェイへのような外部リソースにフォームを送信する場合に便利です。
config.action_view.embed_authenticity_token_in_remote_forms = false
を指定すると、埋め込み認証トークンがremoteフォームで省略されることがあります。この指定はフォームでフラグメントキャッシュを使う場合に便利です(remoteフォームがmeta
タグから認証トークンを取得するようになるので、JavaScriptがオフになっているブラウザをサポートする場合を除けば認証トークンをフォームに埋め込む必要がなくなります)。 :local
- (Rails 7)標準のHTTPフォームを送信するかどうかを指定します。
true
を指定すると、フォームは標準のHTTPで送信されます。false
を指定すると、フォームは「リモートフォーム」として送信され、Rails UJSによってXHRとして処理されます。指定のない場合の振る舞いは、
config.action_view.form_with_generates_remote_forms
設定から導出されますが、この設定の値は実際にはlocal
の値と逆です。
Rails 6.1では、この設定オプションはデフォルトでfalse
になります(local: true
を渡すのと同等)。
それより前のバージョンのRailsでは、この設定オプションはデフォルトでtrue
になります(local: false
を渡すのと同等)。 :skip_enforcing_utf8
true
を指定すると、送信時にutf8
という名前の隠しフィールドが出力されなくなります。:builder
- フォームのビルドに使うオブジェクトをオーバーライドします。
:id
- HTMLの
id
属性を指定します(オプション)。 :class
- HTMLの
class
属性を指定します(オプション)。 :data
- HTMLの
data
属性を指定します(オプション)。 :html
- 上以外のHTML属性を使う場合に指定します(オプション)。
⚓ 例
#form_with
にブロックを渡さない場合は、開始formタグを生成します。
# 名前付きパスを指定する場合
<%= form_with(model: @article, url: super_articles_path) %>
# スコープを追加する場合
<%= form_with(model: @article, scope: :blog) %>
# フォーマットを指定する場合
<%= form_with(model: @article, format: :json) %>
# トークンを無効にする場合
<%= form_with(model: @article, authenticity_token: false) %>
ルーティングをadmin_article_url
のように名前空間化する場合は以下のようにします。
<%= form_with(model: [ :admin, @article ]) do |form| %>
...
<% end %>
リソースに関連付けが定義されている状態で、ルーティングが正しく設定されているdocumentにcommentを追加したい場合は次のようにします。
<%= form_with(model: [ @document, Comment.new ]) do |form| %>
...
<% end %>
上のdocumentには@document = Document.find(params[:id])
が既に与えられているとします。
⚓ 他のフォームヘルパーと組み合わせる
#form_with
ではFormBuilderオブジェクトが使われていますが、単独のFormHelper
のメソッドやFormTagHelper
のメソッドと共存させることもできます。
<%= form_with scope: :person do |form| %>
<%= form.text_field :first_name %>
<%= form.text_field :last_name %>
<%= text_area :person, :biography %>
<%= check_box_tag "person[admin]", "1", @person.company.admin? %>
<%= form.submit %>
<% end %>
同様に、FormOptionsHelper
のメソッド(FormOptionsHelper#collection_select
など)と共存させたり、DateHelper
のメソッド(ActionView::Helpers::DateHelper#datetime_select
など)と共存させることもできます。
⚓ HTTPメソッド(verb)の指定方法
以下のHTTP verbの完全な配列をoptions
ハッシュに渡すことができます。
method: (:get|:post|:patch|:put|:delete)
verbがGET
やPOST
以外の場合(この2つはHTMLフォームでネイティブでサポートされます)、フォームそのものにはPOST
verbが設定され、_method
という名前の隠しinputフィールドには指定の verbが設定され、後者がサーバーで解釈されます。
⚓ HTMLオプションの設定方法
HTMLのdata-*
属性はdata:
ハッシュで直接渡せますが、id:
やclass:
を含む他のすべてのHTMLオプションについては次のようにhtml:
ハッシュの中に置く必要があります。
<%= form_with(model: @article,
data: { behavior: "autosave" },
html: { name: "go" }) do |form| %>
...
<% end %>
上のコードから以下のHTMLが生成されます。
<form action="/articles/123" method="post" data-behavior="autosave" name="go">
<input name="_method" type="hidden" value="patch" />
...
</form>
⚓ 非表示のモデルidを出力しないようにする
#form_with
メソッドを使うと、自動的にモデルidが隠しフィールドとしてフォームに含まれます。このモデルidは、フォームデータとそれに関連付けられているモデルとの関連を保つために使われます。
ORMシステムによってはネストしたモデルでこうしたidを使わないものもあるので、その場合は次のようにinclude_id: false
を指定することで隠しフィールドのモデルidを出力しないようにできます。
<%= form_with(model: @article) do |form| %>
<%= form.fields(:comments, skip_id: true) do |fields| %>
...
<% end %>
<% end %>
⚓ フォームビルダをカスタマイズする
FormBuilder
クラスをカスタマイズしてフォームをビルドすることもできます。カスタマイズするには、FormBuilder
を継承してサブクラスを作り、必要なヘルパーメソッドを定義またはオーバーライドします。
次のコード例では、フォームのinputにラベルを自動追加するヘルパーを作成済みであることが前提です。
<%= form_with model: @person, url: { action: "create" }, builder: LabellingFormBuilder do |form| %>
<%= form.text_field :first_name %>
<%= form.text_field :last_name %>
<%= form.text_area :biography %>
<%= form.check_box :admin %>
<%= form.submit %>
<% end %>
上のようにコードを書いてから、次のコードを書きます。
<%= render form %>
これにより、people/_labelling_form
というテンプレートを使ってレンダリング(=HTML生成)され、フォームビルダを参照するローカル変数の名前はlabelling_form
になります。
特に指定しない限り、カスタムのFormBuilder
クラスは、ネストした#fields_for
呼び出しのオプションと自動的にマージされます。
上のようなコードを別のヘルパーにも含めておきたい場合、多くは以下のように書くこともできます。
def labelled_form_with(**options, &block)
form_with(**options.merge(builder: LabellingFormBuilder), &block)
end
更新情報
Post
をArticle
に置き換え)