🐈
form_withで使える主なフォームヘルパーまとめ(Rails 8.0)
はじめに
Railsガイド(Version:8.0)で紹介されているフォーム要素の生成用のヘルパーをまとめてみました。
下記で紹介しているコードは全てRailsガイド(Version:8.0)より引用しております。
チェックボックス
<%= form.checkbox :biography %>
<%= form.label :biography, "Biography" %>
<%= form.checkbox :romance %>
<%= form.label :romance, "Romance" %>
<%= form.checkbox :mystery %>
<%= form.label :mystery, "Mystery" %>
チェックしたものはparams[:フィールド名]に"1"が送信されます。
{
"biography" => "1",
"romance" => "0",
"mystery" => "0"
}
ラジオボタン
<%= form.radio_button :flavor, "chocolate_chip" %>
<%= form.label :flavor_chocolate_chip, "Chocolate Chip" %>
<%= form.radio_button :flavor, "vanilla" %>
<%= form.label :flavor_vanilla, "Vanilla" %>
<%= form.radio_button :flavor, "hazelnut" %>
<%= form.label :flavor_hazelnut, "Hazelnut" %>
同じキー（上記では:flavor)でラジオボタンを複数作った場合、どれか一つのみが選択できます。
params[:flavor] = "Hazelnut"となります。
日付・時刻関連
<%= form.date_field :born_on %>
<%= form.time_field :started_at %>
<%= form.datetime_local_field :graduation_day %>
<%= form.month_field :birthday_month %>
<%= form.week_field :birthday_week %>
テキスト関連
テキスト(1行)
<%= form.text_field :name%>
1行のテキスト入力欄が作成されます
テキスト(複数行)
<%= form.text_area :message, size: "70x5" %>
複数行のテキストエリアが作成されます。
size:で行数と列数の指定ができます
パスワード
<%= form.password_field :password %>
入力内容が見えないように隠されます
メールアドレス
<%= form.email_field :address %>
メール形式で入力されているかどうかのバリデーションチェックが自動で行われます。
電話番号
<%= form.telephone_field :phone %>
スマホで開いた時に、数字入力に最適化されたキーボードが表示されます。
URL
<%= form.url_field :homepage %>
WebサイトなどのURLの入力に適しています。
ブラウザによっては入力がURL形式かどうかのチェックが行われることがあります。
検索欄
<%= form.search_field :form_helpers %>
小さめの検索欄です。サイト内検索やキーワード入力用の検索フォームに適しています。クリアボタンがあります。
非表示
<%= form.hidden_field :parent_id, value: "foo" %>
画面に表示されません。
ユーザーには見せたくないけど、特定の値をサーバーに送信したい時などに使われます。
数値・色関連
数値入力
<%= form.number_field :price, in: 1.0..20.0, step: 0.5 %>
最小値・最大値・刻み幅を指定可能です。
スライダー
<span>1</span><%= form.range_field :discount, in: 1..100 %><span>100</span>
数値がスライドで入力できます。
色選択
<%= form.color_field :favorite_color %>
カラーピッカーが表示されます。
↓クリックすると色を選択できる
参考
Discussion