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

2020 5/22

2020.01.12 2020.05.22

目的

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_field	url用の入力欄を生成
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>