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_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>

HTMLでの表示




終わりに

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

https://hirocorpblog.com/roadmap-engineer/

よかったらシェアしてね!
目次
閉じる