目次
目的
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をまとめてみましたが、自分が使いたいフォームに合わせて選びましょう!
徐々に実際のフォームを見れるように追記していきます。