LoginSignup
3
4

More than 3 years have passed since last update.

【Rails】form_withの属性や基本構文

Posted at

はじめに

チーム開発にて Ruby on Rails を用いてWebアプリを作成中です。

まだまだ未熟なため、記述やコードがわかりにくいかもしれません。
記載しきれなかったものや変更点は、随時更新・ブラッシュアップしていきます。

私と同じ初学者の方は検索に検索を重ねると「いま自分が何を調べたいのか」が分からなくなってしまいがちですので、専門用語やカタカナ用語は都度 解説します。

form_with
フォーム実装のためのヘルパーメソッド。
Rails5.1よりform_withが導入され、form_forやform_tagが非推奨となり今後 削除される予定となっている。一つの構文でフォームが書けるようになった。
HTTPメソッドを指定する必要が無い。form_withではinputタグは用いない。

html.haml
.form-wrapper
  = form_with url: credit_cards_path, method: :post, model: @card, local: true, html:{name: "inputForm"}, class: 'form-wrapper', id: 'charge-form' do |form|

解説します。

= form_with 〜 do |form|
-# 例えるなら、お菓子作りでいうケーキカップ(= form_with)と袋と紐(do |form|)
url: credit_cards_path
-# パスは関連モデルがある場合、省略可。
method: :post
-# formのデフォルトHTTPメソッドはPOST、省略可。
model: @card
-# ActiveRecordを継承するモデルのインスタンスが利用可。
local: true
-# デフォルトで非同期通信リクエストで送信されるようになる。remote: trueの指定をする必要は無い。

非同期通信
コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式。つまり、送信者と受信者の両方がオンラインである必要がなく、片方が接続しているだけで通信が成立する。

html:{name: "inputForm"}
-# name: "inputForm"(html:{}が無い)だとエラーになる。
class: 'form-wrapper', id: 'charge-form'
-# class属性やid属性にはHTML属性は不要。

form_with ヘルパー表

オプション 説明 デフォルト値
:url フォームに入力されたデータを送信するURL。名前付きルートを直接使用可能 nil
:method HTTPメソッドの指定。 POST
:format 送信するデータ形式 JSON形式やXML形式など:urlオプションが指定された場合は無視される。 text/html
:scope ルーティングで名前空間が指定されている場合に利用するPrefix指定。 nil
:model モデルオブジェクト。オブジェクトが新規レコードの場合は作成フォームが生成され、既存レコードの場合は更新フォームが生成される。 nil
:authenticity_token 認証トークンの指定。カスタム認証トークンでオーバーライドするかfalse、認証トークンフィールドをスキップする。
:local リモートフォームを使わない設定。 false
:skip_enforcing_utf8 IE5以前の文字化け対策(UTF-8の矯正送信)のスキップ設定。 false
:builder フォームオブジェクトのオーバーライド(オリジナルフォームコントロールの作成) nil
:id オプションのHTML id属性 nil
:class オプションのHTML class属性 nil
:data オプションのHTML data属性 nil
:html id、class、data以外のオプションHTML属性 nil

おわりに

form_withのまとめは以上となります。
例がお役に立てば幸いです。

参考記事

form_for/form_tag/form_withについて【概要+使い方】
form_withまとめ

3
4
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
3
4