【Rails】フォーム要素の表現方法

入力制限系

<%= f.text_field :name, maxlength: 15, required: true, pattern: '[a-z0-9]+' %>
<%= f.file_field :user_data, accept: 'text/csv, application/pdf, image/png, image/jpeg, image/gif' %>

セレクトボックス

select

erb

<%= f.select :mc_id, options_for_select([['mcを選択してください', ''], ['晋平太', '1'], ['チプルソ', '2'], ['NAIKA MC', '3']]), {}, {class: 'mclist__select'} %>

出力されるHTML

<select class="mclist__select" name="user[mc_id]" id="user_mc_id">
  <option value="">mcを選択してください</option>
  <option value="1">晋平太</option>
  <option value="2">チプルソ</option>
  <option value="3">NAIKA MC</option>
</select>

collection_select

erb

<%= f.collection_select :mc_id, Mc.all, :id, :name, {prompt: 'mcを選択してください'}, class: 'mclist__select' %>

出力されるHTML

<select class="mclist__select" name="user[mc_id]" id="user_mc_id">
  <option value="1">晋平太</option>
  <option value="2">チプルソ</option>
  <option value="3">NAIKA MC</option>
  <option selected="selected" value="4">R-指定</option>
.
.
</select>

{}内の値は省略可能。
でも{}が無いとクラスの指定が効きません。

ラジオボタン

enumを使わない場合

erb

<%= f.label :receive_news, '受け取る', value: 1 %>
<%= f.radio_button :receive_news, '1' %>

<%= f.label :receive_news, '受け取らない', value: 0 %>
<%= f.radio_button :receive_news, '0' %>

出力されるhtml

<label for="customer_receive_news_1">受け取る</label>
<input type="radio" value="1" checked="checked" name="customer[receive_news]" id="customer_receive_news_1" />

<label for="customer_receive_news_0">受け取らない</label>
<input type="radio" value="0" name="customer[receive_news]" id="customer_receive_news_0" />

ラベルのfor属性は文字列でも指定できる

erb

<%= f.label 'for属性の値', '受け取る', value: 1 %>

出力されるhtml

<label for="customer_for属性の値">受け取る</label>

enumを使う場合

model

class Product < ApplicationRecord
  enum sales_status: { on_sale: 0, draft: 1 }
end

erb

<%= f.label :sales_status_draft, '下書き' %>
<%= f.radio_button :sales_status, :draft %>
<%= f.label :sales_status_on_sale, '公開' %>
<%= f.radio_button :sales_status, :on_sale %>

出力されるhtml

<label for="product_sales_status_draft">下書き</label>
<input type="radio" value="draft" name="product[sales_status]" id="product_sales_status_draft" />
<label for="product_sales_status_on_sale">公開</label>
<input type="radio" value="on_sale" name="product[sales_status]" id="product_sales_status_on_sale" />

チェックボックス

erb

<%= f.check_box :remember, id: "check1" %>

出力されるhtml

<input name="session[remember]" type="hidden" value="0" />
<input id="check1" type="checkbox" value="1" name="session[remember]" />

なんか2つ出力されました。

ファイル送信

erb

<%= f.file_field :csv, accept: '.csv' %>

出力されるhtml

<input type="file" name="csv" accept=".csv">

hidden

erb

<%= f.hidden_field :contact_id, value: @contact.id %>

html

<input value="1" type="hidden" name="comment[contact_id]" id="comment_contact_id" />

日時

テキストエリア

<%= f.text_area :content %>

<textarea class="form__txt" name="contact[content]" id="contact_content"></textarea>

リセットボタン

erb

<%= f.button "リセット", type: :reset %>

html

<button name="button" type="reset">リセット</button>

<input type="reset" value="リセット">を直書きしても良い。

(オマケ)Strong Parameters

#userというオブジェクトに紐づいたname等の値を許可する
params.require(:user).permit(:name, :email, :password, :password_confirmation)

参考

collection_selectにclassをセットする