Railsのform_withでHTMLを生成するためのヘルパーメソッドまとめ

スポンサーリンク

目的

form_withでHTMLを生成するためのヘルパーメソッドを簡単に探す。

(前提、環境)

mac
macOS Mojave 10.14.5
ruby 2.5.1
rails 5.2.3

はじめに

公式

Ruby on Rails 5.1.7 ModuleActionView::Helpers::FormHelper
https://api.rubyonrails.org/v5.1.7/classes/ActionView/Helpers/FormHelper.html

form_withとは

こちらの記事を読む前に以下の記事を参照してみてください!

Railsのform_withの使い方をマスターする。
https://hirocorpblog.com/post-319/

form_withで使えるメソッド一覧

メソッド説明
check_boxデータベースの情報を使わないでチェックボックスを生成
collection_check_boxesデータベースの情報を元にチェックボックスを生成
collection_selectデータベースの情報を元に選択肢を生成
color_field色の選択肢を生成
date_field年/月/日の入力欄を生成
date_select日付選択ボックスを生成
datetime_field年/月/日/時の入力欄を生成
datetime_local_field年/月/日/時の入力欄を生成
email_fieldメールアドレス入力ボックスを生成
fields
fields_for
file_fieldファイル選択ボックスを生成
hidden_field非表示のフォーム
labelラベルの生成
month_field年/月の入力欄を生成
number_field数値入力ボックスを生成
password_fieldパスワードの入力欄を生成
phone_field電話番号の入力欄を生成
radio_button選択形式のボタンを生成
range_field横幅を選ぶフォームを生成
search_field検索窓を生成
select選択ボックスを生成
telephone_field電話番号の入力欄を生成
text_area複数行のテキスト投稿フォームを生成
text_field一行のテキスト投稿フォームを生成
time_field時間の入力欄を生成
url_fieldurl用の入力欄を生成
week_field年/週の入力欄を生成
submit送信ボタンの生成

form_withで使えるメソッドの具体的な使い方

color_fieldの使い方

具体的な書き方

<%= form_with url: root_path do |f|%>
  <%= f.color_field :color %>  
  <%= f.submit "test" %>  
<% end %>
</form><form action="/" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" />
    <input type="hidden" name="authenticity_token" value="KipMLglQstsEtHx0Tr0484tCRsIpg5yzRwIL57qZLdH3Jwo/XoI/GVe14zGGfpJ5IB1WdsKqS602QpgF6tKUfA==" />
    <input value="#000000" type="color" name="color" id="color" /><input type="submit" name="commit" value="test" data-disable-with="test" />  
</form>

HTMLでの表示




check_boxの使い方

具体的な書き方

<%= form_with url: root_path do |f|%>
  <%= f.check_box :name %>  
  <%= f.submit "test" %>  
<% end %>
<form action="/" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="G/NQrSjuMpl7h59tbS49AtgOqwbsfMMvUZmW1zsj8aHG/ha8fzy/WyiGACil7ZeIc1G7sgdVFDEg2QU1a2hIDA==" />
  <input name="name" type="hidden" value="0" /><input type="checkbox" value="1" name="color" id="color" />  
  <input type="submit" name="commit" value="test" data-disable-with="test" />  
</form>

HTMLでの表示




終わりに

form_with(またはform_for, form_tag)の生成できるHTMLをまとめてみましたが、自分が使いたいフォームに合わせて選びましょう!
徐々に実際のフォームを見れるように追記していきます。

未経験者から最強のRailsエンジニアになるためのロードマップ
webアプリエンジニアになるためにどの程度学習すべきかをまとめた記事です。
タイトルとURLをコピーしました