Railsドキュメント

特定のモデルに特化したフォームを生成

説明

特定のモデルに特化したフォームを生成
form_withの利用を推奨(Rails5.1以降はform_forとform_tagはform_withに統合されたため)

使い方

form_for(モデルオブジェクト [, オプション]) do |f|
  フォームの本体
end

オプション

オプション 説明 デフォルト値
:as ハッシュのキー名前  
:url フォームの送信先  
:namespace 名前空間の設定  
:method メソッド(get, post, patch, put, deleteなど)  
:authenticity_token 認証トークン  
:remote JavaScriptを使うか false
:enforce_utf8 utf8用の非表示用を出力するか? true
:html タグの属性  
:format フォーマット  

特定のモデルに特化したフォームを生成

form_for(@user) do |f|
end
# <form action="/users" class="new_user" id="new_user" method="post">
# </form>

urlオプション

form_for @user, url: {action: 'update'} do |f|
end
# <form action="/users/update" class="new_user" id="new_user" method="post">
# </form>

HTML属性を指定

form_for(@user, html: {multipart: true}) do |f|
end
# <form action="/users" class="new_user" enctype="multipart/form-data" id="new_user" method="post">
# </form>

ハッシュのキー名を変更

form_for(@person, as: :client) do |f|
end
# params[:client]で取得できるようになる

フォーマット指定

form_for(@post, format: :json) do |f|
end

JavaScriptを使用

form_for(@post, remote: true) do |f|
end
# <form action='http://www.example.com' method='post' data-remote='true'>
# <input name='_method' type='hidden' value='patch' />
# </form>

HTML属性を指定

form_for(@post, data: { behavior: "autosave" }, html: { name: "go" }) do |f|
end
# <form action='http://www.example.com' method='post' data-behavior='autosave' name='go'>
# <input name='_method' type='hidden' value='patch' />
# </form>

外部リソースへのForm

form_for @invoice, url: external_url, authenticity_token: 'external_token' do |f|
end

認証トークンを使わない外部リソースへのForm

form_for @invoice, url: external_url, authenticity_token: false do |f|
end

ソースコード

汎用的なフォームを生成

説明

汎用的なフォームを生成
form_withの利用を推奨(Rails5.1以降はform_forとform_tagはform_withに統合されたため)

使い方

form_tag(リンク先 [オプション or HTML属性 or イベント属性]) do
end

オプション

オプション 説明
:multipart マルチパートを指定
:method HTTPメソッドを指定
:authenticity_token 認証トークンを指定
:remote Ajaxでリンクを処理
:enforce_utf8 utf8用の非表示用を出力するか?

HTML属性

HTML属性 説明
:name 名称
:size サイズ。ピクセル数で指定
:readonly 内容変更を禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey 移動するショートカットキー
:usemap この画像に対応させるイメージマップ
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

基本形(オプションなし)

<%= form_tag('/users') do %>
<% end %>
# <form action="users" method="put">
# </form>

putメソッド指定

<%= form_tag('/users', method: :put) do %>
<% end %>
# <form action="users" method="post">
# </form>

multipart指定

<%= form_tag('/users', multipart: true) do %>
<% end %>
# <form action="users" method="post" enctype="multipart/form-data">
# </form>

JavaScriptを使う

<%= form_tag('/posts', remote: true) %>
# <form action="/posts" method="post" data-remote="true">

外部リソースへのForm

form_tag('http://far.away.com/form', authenticity_token: "cf50faa3fe97702ca1ae")

ソースコード

モデルなどからフォームタグを生成

説明

URL、スコープ、モデルなどからフォームタグを生成

使い方

form_with(モデル or スコープ or URL [, オプション])

オプション

オプション 説明 デフォルト値
:url URLを指定  
:method HTTPメソッドを指定 POST
:format フォーマットを指定 text/html
:scope スコープを指定  
:namespace 名前空間を指定  
:model モデルを指定  
:authenticity_token 認証トークンを指定  
:local リモート送信の無効 false
:skip_enforcing_utf8 送信時にutf8という名前の隠しフィールドを非表示 false
:builder フォームで使うモデルをオーバライド  
:id id属性を指定  
:class class属性を指定  
:data data属性を指定  
:html id、class、data以外のHTMLタグ  

URLからフォームを生成(form_tag的な使い方)

<%= form_with url: posts_path do |form| %>
  <%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
#  <input type="text" name="title">
# </form>

モデルを指定してフォームを生成(form_for的な使い方)

<%= form_with model: Post.new do |form| %>
  <%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
# <input type="text" name="post[title]">
# </form>

スコープを指定してフォームを生成

<%= form_with scope: :post, url: posts_path do |form| %>
  <%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
# <input type="text" name="post[title]">
# </form>

開始タグのみ生成

form_with(model: @post, url: super_posts_path)

form_forやform_tagとの違い

  • デフォルトではid属性やclass属性は付与されない
  • デフォルトでremote: trueが付与
  • モデルの属性にない値も指定が可能

ソースコード

チェックボックスを生成

説明

チェックボックスを生成

使い方

check_box(オブジェクト名, メソッド名 [, オプション, checked_value = "1", unchecked_value = "0"])

f.object

f.check_box(メソッド名 [, オプション, checked_value = "1", unchecked_value = "0"])

オプション

オプション 説明
:checked チェックボックスのチェックの有無
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

check_box

チェックボックスOFF
check_box 'page', 'freezeflag', {}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
チェックボックスON
check_box 'page', 'freezeflag', {checked: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
利用禁止
check_box 'page', 'freezeflag', {disabled: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
Tabキーによる入力欄の移動順
check_box 'page', 'freezeflag', {tabindex: 1}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />
フォームに移動するショートカットキー
check_box 'page', 'freezeflag', {accesskey: 'k'}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

f.check_box

チェックボックスOFF
f.check_box 'freezeflag', {}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
チェックボックスON
f.check_box 'freezeflag', {checked: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
利用禁止
f.check_box 'freezeflag', {disabled: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
Tabキーによる入力欄の移動順
f.check_box 'freezeflag', {tabindex: 1}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />
フォームに移動するショートカットキー
f.check_box 'freezeflag', {accesskey: 'k'}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

ソースコード

汎用的なチェックボックスを生成

説明

モデルと関連のないチェックボックスを生成

使い方

check_box_tag(要素名 [, value値, checked = false, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化

HTML属性

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

チェックボックスOFF

check_box_tag 'page[freezeflag]', true, false, {}
# <input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

チェックボックスON

check_box_tag 'page[freezeflag]', true, true, {}
# <input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

利用禁止

check_box_tag 'page[freezeflag]', true, false, {disabled: true}
# <input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

Tabキーによる入力欄の移動順

check_box_tag 'page[freezeflag]', true, false, {tabindex: 1}
# <input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />

フォームに移動するショートカットキー

check_box_tag 'page[freezeflag]', true, false, {accesskey: 'k'}
# <input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />

ソースコード

ラジオボタンを生成

説明

ラジオボタンを生成

使い方

radio_button(オブジェクト名, メソッド名, value値 [, オプション])

f.object

f.radio_button(メソッド名, value値 [, オプション])

オプション

オプション 説明
:checked チェックの有無
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

radio_button

ラジオボタンOFF
radio_button 'page', 'category', 'rails_base'
# <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
ラジオボタンON
radio_button 'page', 'category', 'rails_base', checked: true
# <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
フォームの項目の利用禁止
radio_button 'page', 'category', 'rails_base', disabled: true
# <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
Tabキーによる入力欄の移動順
radio_button 'page', 'category', 'rails_base', tabindex: 1
# <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" />
フォームに移動するショートカットキー
radio_button 'page', 'category', 'rails_base', accesskey: 'k'
# <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

f.radio_button

ラジオボタンOFF
f.radio_button 'category', 'rails_base'
# <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
ラジオボタンON
f.radio_button 'category', 'rails_base', checked: true
# <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
フォームの項目の利用禁止
f.radio_button 'category', 'rails_base', disabled: true
# <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
Tabキーによる入力欄の移動順
f.radio_button 'category', 'rails_base', tabindex: 1
# <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" />
フォームに移動するショートカットキー
f.radio_button 'category', 'rails_base', accesskey: 'k'
# <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

ソースコード

汎用的なラジオボックスを生成

説明

モデルと関連のないラジオボタンを生成

使い方

radio_button_tag(要素名, value値 [, checked = false, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化

HTML属性

HTML属性 説明
:checked チェックの有無
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

ラジオボタンOFF

Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base' %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base' %>
# Railsの基礎知識: <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />

ラジオボタンON

Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base' %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base' %>
# Railsの基礎知識: <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input checked="checked" id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />

フォームの項目の利用禁止

Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {disabled: true} %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base','', {disabled: true} %>
# Railsの基礎知識: <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input disabled="disabled" id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />

Tabキーによる入力欄の移動順

Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {tabindex: 1} %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base','', {tabindex: 2} %>
# Railsの基礎知識: <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input id="page_category_ruby_base" name="page[category]" tabindex="2" type="radio" value="ruby_base" />

フォームに移動するショートカットキー

Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {accesskey: 'k'} %><br />
Rubeの基礎知識: < %= radio_button_tag 'page[category]', 'ruby_base','', {accesskey: 'l'} %>
# Railsの基礎知識: <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

class名を指定

radio_button_tag 'color', "green", true, class: "color_input"
# <input checked="checked" class="color_input" id="color_green" name="color" type="radio" value="green" />

ソースコード

テキストエリアを生成

説明

テキストエリアを生成

使い方

text_area(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])

f.object

f.text_area(メソッド名 [, オプション])

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時

text_area

テキストエリアを生成
text_area :page, :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20"></textarea>
初期値あり
text_area :page, :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20">初期値</textarea>
フォームの幅(20x10)
text_area :page, :comtent, size: "20x10"
# <textarea cols="20" id="page_content" name="page[content]" rows="10"></textarea>
入力フィールドに入力可能な最大文字数
text_area :page, :comtent, maxlength: "20"
# <textarea cols="40" id="page_content" maxlength="20" name="page[content]" rows="20"></textarea>
フォームの項目の利用禁止
text_area :page, :comtent, maxlength: "20"
# <textarea cols="40" disabled ="disabled" id="page_content" name="page[content]" rows="20"></textarea>

f.text_area

テキストエリアを生成
f.text_area :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20"></textarea>
初期値あり
f.text_area :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20">初期値</textarea>
フォームの幅(20x10)
f.text_area :comtent, size: "20x10"
# <textarea cols="20" id="page_content" name="page[content]" rows="10"></textarea>
入力フィールドに入力可能な最大文字数
f.text_area :comtent, maxlength: "20"
# <textarea cols="40" id="page_content" maxlength="20" name="p>ge[content]" rows="20"></textarea>
フォームの項目の利用禁止
f.text_area :comtent, maxlength: "20"
# <textarea cols="40" disabled ="disabled" id="page_content" name="page[content]" rows="20"></textarea>

ソースコード

汎用的なテキストエリアを生成

説明

モデルと関連のないテキストエリアを生成

使い方

text_area_tag(要素名 [, エリア配下のテキスト, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:size フォームの幅
:rows rowsの設定
:cols columnsの設定
:disabled 無効化
:escape HTMLをエスケープするか

HTML属性

HTML属性 説明
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時

テキストエリアを生成

text_area_tag 'post'
# <textarea id="post" name="post"></textarea>

テキストエリアに表示する文字列を指定

text_area_tag 'bio', @user.bio
# <textarea id="bio" name="bio">This is my biography.</textarea>

カラム数などを指定

text_area_tag 'body', nil, rows: 10, cols: 25
# <textarea cols="25" id="body" name="body" rows="10"></textarea>

フォーム幅を指定

text_area_tag 'body', nil, size: "25x10"
# <textarea name="body" id="body" cols="25" rows="10"></textarea>

無効化

text_area_tag 'description', "Description goes here.", disabled: true
# <textarea disabled="disabled" id="description" name="description">Description goes here.</textarea>

class属性を指定

text_area_tag 'comment', nil, class: 'comment_input'
# <textarea class="comment_input" id="comment" name="comment"></textarea>

ソースコード

パスワード入力ボックスを生成

説明

パスワード入力ボックスを生成

使い方

password_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.password_field(メソッド名 [, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

password_field

パスワード入力ボックスを生成
password_field :page, :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" />
初期値あり
password_field :page, :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" value="abc" />
フォームの幅
password_field :page, :pass, :size = '40'
# <input id="page_pass" name="page[pass]" size="40" type="password" />

f.password_field

パスワード入力ボックスを生成
f.password_field :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" />
初期値あり
f.password_field :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" value="abc" />
フォームの幅
f.password_field :pass, :size = '40'
# <input id="page_pass" name="page[pass]" size="40" type="password" />

ソースコード

汎用的なパスワード入力ボックス

説明

モデルと関連のないパスワード入力ボックスを生成

使い方

password_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

パスワード入力ボックスを生成

password_field_tag 'pass'
# <input id="pass" name="pass" type="password" />
value値を指定
password_field_tag 'secret', 'Your secret here'
# <input id="secret" name="secret" type="password" value="Your secret here" />

class属性を付与

password_field_tag 'masked', nil, class: 'masked_input_field'
# <input class="masked_input_field" id="masked" name="masked" type="password" />

フォーム幅を指定

password_field_tag 'token', '', size: 15
# <input id="token" name="token" size="15" type="password" value="" />

入力可能な最大文字数

password_field_tag 'key', nil, maxlength: 16
# <input id="key" maxlength="16" name="key" type="password" />

無効化

password_field_tag 'confirm_pass', nil, disabled: true
# <input disabled="disabled" id="confirm_pass" name="confirm_pass" type="password" />

ソースコード

隠しフィールドを生成

説明

隠しフィールドの生成

使い方

hidden_field(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])

f.object

f.hidden_field(メソッド名 [, HTML属性 or イベント属性]

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

hidden_field

隠しフィールドの生成
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" />
初期値あり
# @page.set = "abc"
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />
class属性を指定
hidden_field :page, :set, :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />

f.hidden_field

隠しフィールドの生成
f.hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" />
初期値あり
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />
class属性を指定
hidden_field :page, :set, :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />

ソースコード

汎用的な隠しフィールドを生成

説明

モデルと関連のない隠しフィールドの生成

使い方

hidden_field_tag(要素名 [, value値, HTML属性 or イベント属性])

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

初期値なし

hidden_field_tag 'page[set]'
# <input id="page_set" name="page[set]" type="hidden" />

初期値あり

hidden_field_tag 'page[set]', @page.set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />

class属性を指定

hidden_field_tag 'page[set]', '', :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />

ソースコード

ラベルタグを生成

説明

labelタグを生成

使い方

label(オブジェクト名, メソッド名 [, ラベル配下のコンテンツ, オプション])

f.object

f.label(メソッド名 [, ラベル配下のコンテンツ, オプション])

オプション

オプション 説明
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

label

labelタグを生成
label(:post, :cost)
# <label for="post_cost">Total cost</label>
ラベル名を指定
label(:post, :title, "A short title")
# <label for="post_title">A short title</label>

class属性を付与

label(:post, :title, "A short title", class: "title_label")
# <label for="post_title" class="title_label">A short title</label>

ブロック指定

label(:post, :terms) do
  raw('Accept <a href="/terms">Terms</a>.')
end
# <label for="post_terms">Accept <a href="/terms">Terms</a>.</label>

f.label

ラベル配下のコンテンツなし
f.label :name
# <label for="page_name">Name</label>
ラベル配下のコンテンツあり
f.label :name, @page.name
# <label for="page_name">abc</label>
class属性の指定
f.label :name, '', class: 'page_name'
# <label class="page_name" for="page_name">Name</label>

ソースコード

汎用的なラベルタグを生成

説明

モデルと関連のないlabelタグを生成

使い方

label_tag(要素名 [, ラベル配下のコンテンツ] [, HTML属性 or イベント属性])

HTML属性

HTML属性 説明
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

ラベル配下のコンテンツなし

label_tag 'page[name]'
# <label for="page_name">Name</label>

ラベル配下のコンテンツあり

# @page.name = "abc"
label_tag 'page[name]', @page.name
# <label for="page_name">abc</label>

class属性の指定

label_tag 'page[name]', '', class: 'page_name'
# <label class="page_name" for="page_name">Name</label>

ソースコード

テキストボックスを生成

説明

テキストボックスを生成

使い方

text_field(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])

f.object

f.text_field(メソッド名 [, HTML属性 or イベント属性])

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時

text_field

テキストボックスを生成
text_field :page, :name
# <input id="page_name" name="page[name]" size="30" type="text" />
初期値あり
text_field :page, :name
# <input id="page_name" name="page[name]" size="30" type="text" value="abc" />
class属性を指定
text_field :page, :name, :class = 'page_name'
# <input class="page_name" id="page_name" name="page[name]" size="30" type="text" />

f.text_field

テキストボックスを生成
f.text_field :name
# <input id="page_name" name="page[name]" size="30" type="text" />
初期値あり
f.text_field :name
# <input id="page_name" name="page[name]" size="30" type="text" value="abc" />
class属性を指定
f.text_field :name, :class = 'page_name'
# <input class="page_name" id="page_name" name="page[name]" size="30" type="text" />

ソースコード

汎用的なテキストボックスを生成

説明

テキストボックスを生成

使い方

text_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size
:maxlength 入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

基本的な使い方

text_field_tag 'name'
# <input id="name" name="name" type="text" />

値を指定

text_field_tag 'query', 'Enter your search query here'
# <input id="query" name="query" type="text" value="Enter your search query here" />

フォーカスが当たるまでデフォルト表示される文字列を指定

text_field_tag 'search', nil, placeholder: 'Enter search term...'
# <input id="search" name="search" placeholder="Enter search term..." type="text" />

HTML属性を指定

text_field_tag 'request', nil, class: 'special_input'
# <input class="special_input" id="request" name="request" type="text" />

サイズを指定

text_field_tag 'address', '', size: 75
# <input id="address" name="address" size="75" type="text" value="" />

最大文字数を指定

text_field_tag 'zip', nil, maxlength: 5
# <input id="zip" maxlength="5" name="zip" type="text" />

無効化

text_field_tag 'payment_amount', '$0.00', disabled: true
# <input disabled="disabled" id="payment_amount" name="payment_amount" type="text" value="$0.00" />

オプションとHTML属性を指定

text_field_tag 'ip', '0.0.0.0', maxlength: 15, size: 20, class: "ip-input"
# <input class="ip-input" id="ip" maxlength="15" name="ip" size="20" type="text" value="0.0.0.0" />

ソースコード

ファイル選択ボックスを生成

説明

ファイル選択ボックスを生成

使い方

file_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.file_field(メソッド名 [, オプション])

オプション

オプション 説明
:disabled 無効化
:accept フォームで受付可能なMIMEタイプ
:multiple 複数選択可能
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語
:value 初期値

file_field

ファイル選択ボックスを生成
file_field :page, :fine_name
# <input id="page_fine_name" name="page[fine_name]" size="30" type="file" />
class属性を指定
file_field :page, :fine_name, :class = 'page_fine_name'
# <input class="page_fine_name" id="page_fine_name" name="page[fine_name]" size="30" type="file" />

f.file_field

ファイル選択ボックスを生成
f.file_field :fine_name
# <input id="page_fine_name" name="page[fine_name]" size="30" type="file" />
class属性を指定
f.file_field :fine_name, :class = 'page_fine_name'
# <input class="page_fine_name" id="page_fine_name" name="page[fine_name]" size="30" type="file" />

ソースコード

汎用的なファイル選択ボックスを生成

説明

モデルと関連のないファイル選択ボックスを生成

使い方

file_field_tag(要素名 [, オプション])

オプション

オプション 説明
:disabled 無効化
:multiple 複数選択可能
:accept フォームで受付可能なMIMEタイプ
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語
:value 初期値

ファイル選択ボックスを生成

file_field_tag 'attachment'
# <input id="attachment" name="attachment" type="file" />

class付与

file_field_tag 'avatar', class: 'profile_input'
# <input class="profile_input" id="avatar" name="avatar" type="file" />

無効化

file_field_tag 'picture', disabled: true
# <input disabled="disabled" id="picture" name="picture" type="file" />

初期値

file_field_tag 'resume', value: '~/resume.doc'
# <input id="resume" name="resume" type="file" value="~/resume.doc" />

複数タイプ指定

file_field_tag 'user_pic', accept: 'image/png,image/gif,image/jpeg'
# <input accept="image/png,image/gif,image/jpeg" id="user_pic" name="user_pic" type="file" />

ソースコード

選択ボックスを生成

説明

選択ボックスを生成

使い方

select(オブジェクト名, メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])

f.object

f.select(メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明 デフォルト値
:multiple 複数選択を有効にするか  
:disabled 無効化 false
:include_blank 先頭に空の要素を追加するか  
:prompt 選択されていない時に表示される文字  

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

select

選択ボックスを生成
select("post", "person_id", Person.all.collect { |p| [ p.name, p.id ] }, { include_blank: true })
# <select name="post[person_id]" id="post_person_id">
#   <option value=""></option>
#   <option value="1" selected="selected">David</option>
#   <option value="2">Eileen</option>
#   <option value="3">Rafael</option>
# </select>

f.select

選択ボックスを生成
f.select :person_id, Person.all.collect { |p| [ p.name, p.id ] }, include_blank: true

ソースコード

配列・ハッシュから選択肢を生成

説明

配列・ハッシュから選択肢を生成

使い方

options_for_select(要素の配列 or ハッシュ [, 選択された要素])

タグの情報を配列で指定

select_tag 'page[name]', options_for_select([["Railsの基礎", "rails_base"], ["Rubyの基礎", "ruby_base"]])
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

タグの情報をハッシュで指定

select_tag 'page[name]', options_for_select({Railsの基礎: "rails_base", Rubyの基礎: "ruby_base"})
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

選択されたオプション

select_tag 'page[name]', options_for_select({Railsの基礎: "rails_base", Rubyの基礎: "ruby_base"}, selected: "ruby_base")
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

選択された要素あり

options_for_select([['Japanese', 'JPN']], 'JPN')

ソースコード

配列・ハッシュから作成した選択肢をグループ化

説明

配列・ハッシュから作成した選択肢をグループ化

使い方

grouped_options_for_select(タグの配列 or ハッシュ [, オプション, 選択オプションの先頭に表示される文字列])

オプション

オプション 説明
:prompt 指定したオプションを先頭に追加
:divider グループの仕切り

タグの情報を配列で指定

select_tag 'page[name]', grouped_options_for_select([["基礎", [["Railsの基礎", "rails_base"], ["Rubyの基礎", "ruby_base"]]]])
# <select id="page_name" name="page[name]"><optgroup label="基礎"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></optgroup></select>

タグの情報をハッシュで指定

select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]})
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

選択されたオプション

select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]}, "rails_base")
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

選択オプションの先頭に表示される文字列

select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]}, "", "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>

ソースコード

グループ分けされた選択肢を生成

説明

グループ分けされた選択ボックスを生成

使い方

option_groups_from_collection_for_select(要素の配列 or ハッシュ, グループメソッド, グループのラベル属性の項目, value属性の項目, textの項目 [, 選択された要素])

グループ分けされた選択ボックスを生成

option_groups_from_collection_for_select(@continents, :countries, :name, :id, :name, 3)

ソースコード

選択ボックスを生成

説明

選択ボックスを生成

使い方

options_from_collection_for_select(要素の配列, value属性の項目, textの項目 [, 選択された要素])

選択ボックスを生成

options_from_collection_for_select @categories, :id, :name

選択された要素あり

options_from_collection_for_select @categories, :id, :name, 2

ソースコード

選択ボックスをモデルの情報を元に生成

説明

選択ボックスをモデルの情報を元に生成

使い方

collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

f.object

f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:include_blank 空のオプションを先頭に追加
:disabled 無効化
:selected 選択されたオプション

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

collection_select

基本形(オプションなし)
collection_select(:page, :name, @categories, :id, :name)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
collection_select(:page, :name, @categories, :id, :name, nil, prompt: "選択してください")
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
collection_select(:page, :name, @categories, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
選択されたオプション
collection_select(:page, :name, @categories, :id, :name, selected: 2)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2" selected="selected">Rubyの基礎知識</option>
# </select>

f.collection_select

基本形(オプションなし)
f.collection_select(:name, @categories, :id, :name)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
f.collection_select(:name, @categories, :id, :name, nil, prompt: "選択してください")
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
f.collection_select(:name, @categories, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
選択されたオプション
f.collection_select(:name, @categories, :id, :name, selected: 2)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2" selected="selected">Rubyの基礎知識</option>
# </select>

ソースコード

選択ボックスをグループ化

説明

選択ボックスをグループ化

使い方

grouped_collection_select(オブジェクト名, メソッド名, オブジェクトの配列, タグを取得するメソッド, タグのラベル, valueの項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

f.object

f.grouped_collection_select(メソッド名, オブジェクトの配列, タグを取得するメソッド, タグのラベル, valueの項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
   
:object 選択タグに使用されるクラスのインスタンス
:method 選択タグに対応する属性
:collection タグを表すオブジェクトの配列
:group_method グループ名
:group_label_method グループ属性
:option_key_method collectionと使用される値
:option_value_method optionタグのコンテンツとして使用される値

HTML属性

HTML属性 説明
:name 名称
:size サイズ。ピクセル数で指定
:readonly 内容変更を禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey 移動するショートカットキー
:usemap この画像に対応させるイメージマップ
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

grouped_collection_select

選択ボックスをグループ化
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
空のオプションを先頭に追加
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value=""></option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
指定したオプションを先頭に追加
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, :prompt = "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
選択したオプション
# @categories = Category.all
# @page.name = 2
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2" selected="selected">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>

f.grouped_collection_select

選択ボックスをグループ化
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
空のオプションを先頭に追加
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value=""></option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
指定したオプションを先頭に追加
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name, :prompt = "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
選択したオプション
# @categories = Category.all
# @page.name = 2
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2" selected="selected">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>

ソースコード

メールアドレス入力ボックスを生成

説明

メールアドレス入力ボックスを生成

使い方

email_field(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])

f.object

f.email_field(メソッド名 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

email_field

メールアドレス入力ボックスを生成
email_field :page, :email
# <input id="page_email" name="page[email]" size="30" type="email" />
初期値指定
# @page.email = "test@example.com"
email_field :page, :email
# <input id="page_email" name="page[email]" size="30" type="email" value="test@example.com"/>
sizeの指定
email_field :page, :email
# <input id="page_email" name="page[email]" size="40" type="email"/>

f.email_field

メールアドレス入力ボックスを生成
f.email_field :email
# <input id="page_email" name="page[email]" size="30" type="email" />
初期値指定
# @page.email = "test@example.com"
f.email_field :email
# <input id="page_email" name="page[email]" size="30" type="email" value="test@example.com"/>
sizeの指定
f.email_field :email, size: "40"
# <input id="page_email" name="page[email]" size="40" type="email"/>

ソースコード

汎用的なメールアドレス入力ボックスを生成

説明

モデルと関連のないメールアドレス入力ボックスを生成

使い方

email_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

メールアドレス入力ボックスを生成

email_field_tag 'name'
# <input id="name" name="name" type="email" />

初期値

email_field_tag 'email', 'email@example.com'
# <input id="email" name="email" type="email" value="email@example.com" />

classを付与

email_field_tag 'email', nil, class: 'special_input'
# <input class="special_input" id="email" name="email" type="email" />

無効化

email_field_tag 'email', 'email@example.com', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="email" name="email" type="email" value="email@example.com" />

ソースコード

数値入力ボックスを生成

説明

数値入力ボックスを生成

使い方

number_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.number_field(メソッド名 [, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:in 最少値から最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

number_field

数値入力ボックスを生成
number_field :product, :price

f.number_field

数値入力ボックスを生成
f.number_field :confirmed

ソースコード

汎用的な数値入力ボックスを生成

説明

モデルと関連のない数値入力ボックスを生成

使い方

number_field_tag(要素名 [, value値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:in 最少値から最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

数値入力ボックスを生成

number_field_tag 'quantity'
# <input id="quantity" name="quantity" type="number" />

値を指定

number_field_tag 'quantity', '1'
# <input id="quantity" name="quantity" type="number" value="1" />

class属性を付与

number_field_tag 'quantity', nil, class: 'special_input'
# <input class="special_input" id="quantity" name="quantity" type="number" />

最小値を指定

number_field_tag 'quantity', nil, min: 1
# <input id="quantity" name="quantity" min="1" type="number" />

最大値を指定

number_field_tag 'quantity', nil, max: 9
# <input id="quantity" name="quantity" max="9" type="number" />

ソースコード

範囲選択バーを生成

説明

範囲選択バーを生成

使い方

range_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.range_field(メソッド名 [, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

range_field

範囲選択バーを生成
range_field(:product, :discount, in: 1..100)

f.range_field

範囲選択バーを生成
f.range_field(:discount, in: 1..100)

ソースコード

汎用的な範囲選択バーを生成

説明

モデルと関連のない範囲選択バーを生成

使い方

range_field_tag(要素名 [, 値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:in 最少値から最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

範囲選択バーを生成

range_field_tag :volume

ソースコード

検索ボックスを生成

説明

検索ボックスを生成

使い方

search_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.search_field(メソッド名 [, オプション])

オプション

オプション 説明
:autosave オートセーブ
:results 表示される最大数
:onsearch インクリメンタルサーチ
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

search_field

検索ボックスを生成
search_field(:user, :name)
# <input id="user_name" name="user[name]" type="search" />
表示される最大数を3
search_field(:user, :name, results: 3)
# <input id="user_name" name="user[name]" results="3" type="search" />
オートセーブ
search_field(:user, :name, autosave: true)
# <input autosave="com.example.www" id="user_name" name="user[name]" results="10" type="search" />
インクリメンタルサーチ
search_field(:user, :name, onsearch: true)
# <input id="user_name" incremental="true" name="user[name]" onsearch="true" type="search" />

f.search_field

検索ボックスを生成
f.search_field :name

ソースコード

汎用的な検索ボックスを生成

説明

モデルと関連のない検索ボックスを生成

使い方

search_field_tag(要素名 [, value値, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

検索ボックスを生成

search_field_tag 'name'
# <input id="name" name="name" type="search" />

value値を設定

search_field_tag 'search', 'Enter your search query here'
# <input id="search" name="search" type="search" value="Enter your search query here" />

class属性を付与

search_field_tag 'search', nil, class: 'special_input'
# <input class="special_input" id="search" name="search" type="search" />

無効化

search_field_tag 'search', 'Enter your search query here', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="search" name="search" type="search" value="Enter your search query here" />

ソースコード

電話番号入力ボックスを生成

説明

電話番号入力ボックスを生成

使い方

telephone_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.telephone_field(メソッド名 [, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

telephone_field

電話番号入力ボックスを生成
telephone_field("user", "phone")
# <input id="user_phone" name="user[phone]" type="tel" />

f.telephone_field

電話番号入力ボックスを生成
f.telephone_field("phone")

ソースコード

汎用的な電話番号入力ボックスを生成

説明

モデルと関連のない電話番号入力ボックスを生成

使い方

telephone_field_tag(要素名 [, value値, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

電話番号入力ボックスを生成

telephone_field_tag 'name'
# <input id="name" name="name" type="tel" />

value値を設定

telephone_field_tag 'tel', '0123456789'
# <input id="tel" name="tel" type="tel" value="0123456789" />

value値が無い

telephone_field_tag 'tel', nil, class: 'special_input'
# <input class="special_input" id="tel" name="tel" type="tel" />

無効化

telephone_field_tag 'tel', '0123456789', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="tel" name="tel" type="tel" value="0123456789" />

ソースコード

URL入力ボックスを生成

説明

URL入力ボックスを生成

使い方

url_field(オブジェクト名, メソッド名 [, オプション])

f.object

f.url_field(メソッド名 [, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

url_field

URL入力ボックスを生成
url_field("user", "homepage")
# <input id="user_homepage" name="user[homepage]" type="url" />

f.url_field

URL入力ボックスを生成
f.url_field("user", "homepage")
# <input id="user_homepage" name="user[homepage]" type="url" />

ソースコード

汎用的なURL入力ボックスを生成

説明

モデルと関連のないURL入力ボックスを生成

使い方

url_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

URL入力ボックスを生成

url_field_tag 'name'
# <input id="name" name="name" type="url" />

value値を指定

url_field_tag 'url', 'http://rubyonrails.org'
# <input id="url" name="url" type="url" value="http://rubyonrails.org" />

class属性を指定

url_field_tag 'url', nil, class: 'special_input'
# <input class="special_input" id="url" name="url" type="url" />

無効化

url_field_tag 'url', 'http://rubyonrails.org', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="url" name="url" type="url" value="http://rubyonrails.org" />

ソースコード

サブミットボタンを生成

説明

サブミットボタンを生成

使い方

f.submit([ボタンの名前 , オプション])

オプション

オプション 説明
:confirm 確認ダイアログに表示する文字列
:disabled 無効化
:disable_with 無効化したときに表示する文字列
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

サブミットボタンを生成

f.submit

class属性を付与

f.submit :button, class: "btn"

ソースコード

汎用的なサブミットボタンを生成

説明

サブミットボタンを生成

使い方

submit_tag([ボタンの名前 , オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:data Data要素のカスタマイズ
:disabled 無効化

HTML属性

HTML属性 説明
:confirm 確認ダイアログに表示する文字列
:disable_with ボタンを無効化したときに表示する文字列
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

サブミットボタンを生成

submit_tag
# <input name="commit" data-disable-with="Save changes" type="submit" value="Save changes" />

value値を設定

submit_tag "Edit this article"
# <input name="commit" data-disable-with="Edit this article" type="submit" value="Edit this article" />

無効化

submit_tag "Save edits", disabled: true
# <input disabled="disabled" name="commit" data-disable-with="Save edits" type="submit" value="Save edits" />

data属性を設定

submit_tag "Complete sale", data: { disable_with: "Submitting..." }
# <input name="commit" data-disable-with="Submitting..." type="submit" value="Complete sale" />

value値が無い

submit_tag nil, class: "form_submit"
# <input class="form_submit" name="commit" type="submit" />

class属性を設定

submit_tag "Edit", class: "edit_button"
# <input class="edit_button" data-disable-with="Edit" name="commit" type="submit" value="Edit" />

確認ダイアログ

submit_tag "Save", data: { confirm: "Are you sure?" }
# <input name='commit' type='submit' value='Save' data-disable-with="Save" data-confirm="Are you sure?" />

ソースコード

日時選択ボックスを生成

説明

日時の入力に特化した選択ボックスを生成

使い方

datetime_select(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])

f.object

f.datetime_select(メソッド名 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:use_month_numbers 月を数字で表示
:use_two_digit_numbers 月と日を2桁表示
:use_short_month 月名を省略形で表示
:add_month_numbers 数値 + 月名表示
:use_month_names 月名をカスタマイズ
:date_separator 年月日の区切り文字
:start_year 開始年
:end_year 終了年
:minute_step 分の間隔を変更
:discard_day 日の選択ボックスを非表示
:discard_month 月の選択ボックスを非表示
:discard_year 年の選択ボックスを非表示
:order 並び順を指定
:include_blank 空を含めて表示
:default デフォルトの日付を設定
:selected 優先した設定
:disabled 無効化
:prompt 選択値の一番上を指定
:with_css_classes スタイルを変更するタグの設定
:discard_type 名前の型を破棄
:prefix 名前の接頭辞を設定
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

datetime_select

日時の入力に特化した選択ボックスを生成
datetime_select :page, :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月を数字で表示
datetime_select :page, :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月名を省略形で表示
datetime_select :page, :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
数値 + 月名表示
datetime_select :page, :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
年の範囲を2011から2013で10分間隔
datetime_select :page, :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
 省略 
# </select>

f.datetime_select

日時の入力に特化した選択ボックスを生成
f.datetime_select :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月を数字で表示
f.datetime_select :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月名を省略形で表示
f.datetime_select :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
数値 + 月名表示
f.datetime_select :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
年の範囲を2011から2013で10分間隔
f.datetime_select :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
# <option selected="selected" value="2011">2011</option>
 省略 
# </select>

ソースコード

モデルを固定してフォームを生成

説明

モデルを固定してフォームを生成
form_for内で異なるモデルを編集できるようになる

使い方

<%= fields_for(モデル) do |i| %>
<% end %>

pageモデルにcategoryモデルの情報を入力

<%= form_for(@page) do |i| %>
  <%= fields_for @page.category do |category| %>
    <%= category.text_field :name %>
  <% end %>
<% end %>

ソースコード

フォームの要素をグループ化

説明

モデルを固定してフォームを生成
form_for内で異なるモデルを編集できるようになる

使い方

field_set_tag(サブフォームのタイトル [, HTML属性 or イベント属性]) do
end

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

サブフォームがCategory

<%= field_set_tag 'Category' do %>
  <%= text_field_tag 'name' %>
<% end %>
# <fieldset><legend>Category</legend><input id="name" name="name" type="text" /></fieldset>

class付与

field_set_tag 'Compliance', class: 'rights' do
end

ソースコード

ボタンを生成

説明

モデルと関連のないボタンを生成

使い方

button(文字列 [, オプション or データ属性 or HTML属性 or イベント属性])

オプション

オプション 説明
:data Data要素のカスタマイズ
:disabled 無効化

データ属性

オプション 説明
:confirm 確認ダイアログに表示する文字列
:disable_with 送信時にクリック禁止

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時

ボタンを生成

button("作成")
# <button name='button' type='submit'>作成</button>

ブロックでボタンを生成

button do
  content_tag(:strong, 'Ask me!')
end
# <button name='button' type='submit'>
#   <strong>Ask me!</strong>
# </button>

ソースコード

汎用的なボタンを生成

説明

モデルと関連のないボタンを生成

使い方

button_tag([オプション or データ属性 or HTML属性 or イベント属性])

オプション

オプション 説明
:data Data要素のカスタマイズ
:disabled 無効化

データ属性

オプション 説明
:confirm 確認ダイアログに表示する文字列
:disable_with 送信時にクリック禁止

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時

ボタンを生成

button_tag
# <button name="button" type="submit">Button</button>

リセットボタンを生成

button_tag 'Reset', type: 'reset'
# <button name="button" type="reset">Reset</button>

ボタンにstringダグを含める

button_tag(type: 'button') do
  content_tag(:strong, 'Ask me!')
end
# <button name="button" type="button">
#  <strong>Ask me!</strong>
# </button>

データ属性を指定

button_tag "Checkout", data: { disable_with: "Please wait..." }
# <button data-disable-with="Please wait..." name="button" type="submit">Checkout</button>

ソースコード

画像サブミットボタンを生成

説明

画像サブミットボタンを生成

使い方

image_submit_tag(値 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:data Data要素のカスタマイズ
:disabled 無効化

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

画像サブミットボタンを生成

image_submit_tag("login.png")
# <input alt="Login" src="/images/login.png" type="image" />

class属性を付与

image_submit_tag("search.png", class: 'search_button', alt: 'Find')
# <input alt="Find" class="search_button" src="/images/search.png" type="image" />

無効化

image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
# <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/images/agree.png" type="image" />

data要素

image_submit_tag("save.png", data: { confirm: "Are you sure?" })
# <input alt="Save" src="/images/save.png" data-confirm="Are you sure?" type="image" />

ソースコード

色の入力欄を生成

説明

色の入力欄を生成

使い方

color_field(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])

f.object

f.color_field(メソッド名 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

color_field

色の入力欄を生成
color_field "car", "color"
# <input id="car_color" name="car[color]" type="color" value="#000000" />
カラーコード指定
color_field "car", "color", "#DEF726"
# <input id="car_color" name="color" type="color" value="#DEF726" />
プション指定
color_field "car", "color", nil, class: 'special_input'
# <input class="special_input" id="car_color" name="color" type="color" />
フォームの項目の利用禁止
color_fiel "car", "color", "DEF726", class: "special_input", disabled: true
# <input disabled="disabled" class="special_input" id="car_color" name="color" type="color" value="#DEF726" />

f.color_field

色の入力欄を生成
f.color_field "car", "color"
# <input id="car_color" name="car[color]" type="color" value="#000000" />
カラーコードを指定
f.color_field "car", "color", "#DEF726"
# <input id="car_color" name="color" type="color" value="#DEF726" />
HTML属性を指定
f.color_field "car", "color", nil, class: 'special_input'
# <input class="special_input" id="car_color" name="color" type="color" />
フォームの項目の利用禁止
f.color_fiel "car", "color", "DEF726", class: "special_input", disabled: true
# <input disabled="disabled" class="special_input" id="car_color" name="color" type="color" value="#DEF726" />

ソースコード

汎用的な色の入力欄を生成

説明

モデルと関連のない色の入力欄を生成

使い方

color_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

色の入力欄を生成

color_field_tag 'name'
# <input id="name" name="name" type="color" />

カラーコード指定

color_field_tag 'color', '#DEF726'
# <input id="color" name="color" type="color" value="#DEF726" />

プション指定

color_field_tag 'color', nil, class: 'special_input'
# <input class="special_input" id="color" name="color" type="color" />

フォームの項目の利用禁止

color_field_tag 'color', '#DEF726', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="color" name="color" type="color" value="#DEF726" />

ソースコード

日付の入力欄を生成

説明

日付の入力欄を生成

使い方

date_field(要素名 [, 値, オプション])

f.object

f.date_field(要素名 [, 値, オプション])

オプション

オプション 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

date_field

日付の入力欄を生成
date_field "user", "born_on"
# <input id="user_born_on" name="user[born_on]" type="date" />

f.date_field

日付の入力欄を生成
f.date_field "user", "born_on"
# <input id="user_born_on" name="user[born_on]" type="date" />

ソースコード

汎用的な日付の入力欄を生成

説明

モデルと関連のない日付の入力欄を生成

使い方

date_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

日付の入力欄を生成

date_field_tag 'name'
# <input id="name" name="name" type="date" />

初期値を指定

date_field_tag 'date', '01/01/2014'
# <input id="date" name="date" type="date" value="01/01/2014" />

classを付与

date_field_tag 'date', nil, class: 'special_input'
# <input class="special_input" id="date" name="date" type="date" />

ソースコード

日時の入力欄を生成

説明

日時の入力欄を生成

使い方

datetime_field(要素名 [, value値, オプション or HTML属性 or イベント属性])

f.object

f.datetime_field(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

datetime_field

日時の入力欄を生成
datetime_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
datetime_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
datetime_field("user", "born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
datetime_field("user", "born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />

f.datetime_field

日時の入力欄を生成
f.datetime_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
f.datetime_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
f.datetime_field("born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
f.datetime_field("born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />

ソースコード

汎用的な日時の入力欄を生成

説明

モデルと関連のない日時の入力欄を生成

使い方

datetime_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

日時の入力欄を生成

datetime_field_tag :published
# <input type="datetime-local" name="published" id="published">

ソースコード

ローカル日時の入力欄を生成

説明

ローカル日時の入力欄を生成
datetime_fieldの別名

使い方

datetime_local_field(要素名 [, 値, オプション])

f.object

f.datetime_local_field(要素名 [, 値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

datetime_local_field

日時の入力欄を生成
datetime_local_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
datetime_local_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
datetime_local_field("user", "born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
datetime_local_field("user", "born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />

f.datetime_local_field

日時の入力欄を生成
f.datetime_local_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
f.datetime_local_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
f.datetime_local_field("born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
f.datetime_local_field("born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />

ソースコード

汎用的なローカル日時の入力欄を生成

説明

モデルと関連のないローカル日時の入力欄を生成
datetime_field_tagの別名

使い方

datetime_local_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:disabled 無効化
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

ローカル日時の入力欄を生成

datetime_local_field_tag :published
# <input type="datetime-local" name="published" id="published">

ソースコード

月の入力欄を生成

説明

月の入力欄を生成

使い方

month_field(要素名 [, 値, オプション or HTML属性 or イベント属性])

f.object

f.month_field(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

month_field

月の入力欄を生成
month_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="month" />

f.month_field

月の入力欄を生成
f.month_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="month" />

ソースコード

汎用的な月の入力欄を生成

説明

モデルと関連のない月の入力欄を生成

使い方

month_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

月のテキストフィールドを生成

month_field_tag :published_month

最小値を設定

month_field_tag(:published_month, :min => DateTime.new(2020, 1, 1)

ソースコード

時間の入力欄を生成

説明

時間の入力欄を生成

使い方

time_field(要素名 [, 値, オプション])

f.object

f.time_field(要素名 [, 値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

time_field

時間の入力欄を生成
time_field("task", "started_at")
# <input id="task_started_at" name="task[started_at]" type="time" />
最小値を指定
time_field("task", "started_at", min: Time.now)
# <input id="task_started_at" name="task[started_at]" type="time" min="01:00:00.000" />

f.time_field

時間の入力欄を生成
f.time_field :started_at
# <input id="task_started_at" name="task[started_at]" type="time" />

ソースコード

汎用的な時間の入力欄を生成

説明

モデルと関連のない時間の入力欄を生成

使い方

time_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度

HTML属性

HTML属性 説明
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onselect 入力欄のテキストが選択された時
:onchange フォーカスを失う際に値が変化していた時

時間の入力欄を生成

time_field_tag :name

ソースコード

週の入力欄を生成

説明

週の入力欄を生成

使い方

week_field(要素名 [, 値, オプション])

f.object

f.week_field(要素名 [, 値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

week_field

週の入力欄を生成
week_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="week" />

f.week_field

週の入力欄を生成
f.week_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="week" />

ソースコード

モデルと関連のない週の入力欄を生成

説明

モデルと関連のない週の入力欄を生成

使い方

week_field_tag(要素名 [, 値, オプション])

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:placeholder フォーカスが当たるまで表示される文字列
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

週の入力欄を生成

week_field_tag :wk

ソースコード

日付選択ボックスを生成

説明

モデルと関連のない日付の入力に特化した選択ボックスを生成

使い方

date_select(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])

f.object

f.date_select(メソッド名 [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明
:use_month_numbers 月を数字で表示
:use_two_digit_numbers 月と日を2桁表示
:use_short_month 月名を省略形で表示
:add_month_numbers 数値 + 月名表示
:use_month_names 月名をカスタマイズ
:month_format_string フォーマット
:date_separator 年月日の区切り文字
:time_separator 時間の区切り文字
:start_year 開始年
:end_year 終了年
:year_format 年選択の年の形式を設定
:discard_day 日の選択ボックスを非表示
:discard_month 月の選択ボックスを非表示
:discard_year 年の選択ボックスを非表示
:order 並び順を指定
:include_blank 空を含めて表示
:default デフォルトの日付を設定
:selected 優先した設定
:disabled 無効化
:prompt 選択値の一番上を指定
:with_css_classes スタイルを変更するタグの設定
:use_hidden 非表示のタグのみ生成

HTML属性

HTML属性 説明
:discard_type 名前の型を破棄
:prefix 名前の接頭辞を設定
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

datetime_select_tag

日付の入力に特化した選択ボックスを生成
datetime_select_tag :page, :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月を数字で表示
datetime_select_tag :page, :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
月名を省略形で表示
datetime_select_tag :page, :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
数値 + 月名表示
datetime_select_tag :page, :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
 省略 
# </select>
年の範囲を2011から2013で10分間隔
datetime_select_tag :page, :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
 省略 
# </select>

f.date_select

日付の入力に特化した選択ボックスを生成
<%= form_for @person do |f| %>
  <%= f.date_select :birth_date %>
  <%= f.submit %>
<% end %>

ソースコード

時間選択ボックスを生成

説明

時間の入力に特化した選択ボックスを生成

使い方

time_select(オブジェクト名 メソッド名 [, オプション or HTML属性 or イベント属性])

f.object

f.time_select(メソッド名 [, オプション])

オプション

オプション 説明
:include_seconds 秒数選択ボックス
:ampm AM/PM形式
:ignore_date 未入力の場合に送信されない
:order 並び順を指定
:include_blank 空を含めて表示
:include_seconds 秒数選択ボックスを表示
:default デフォルトの日付を設定
:disabled 無効化
:prompt 選択値の一番上を指定
:time_separator 時刻の区切り文字
:discard_type 名前の型を破棄
:prefix 名前の接頭辞を設定
:size フィールドの高さ
:multiple 複数選択可能

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

time_select

時間の入力に特化した選択ボックスを生成
time_select("article", "sunrise")
秒数選択ボックスを表示
time_select("article", "start_time", include_seconds: true)
00, 15, 30, and 45を取得
time_select 'game', 'game_time', {minute_step: 15}
AM/PM形式
time_select 'game', 'game_time', {ampm: true}

f.time_select

時間の入力に特化した選択ボックスを生成
f.time_select :average_lap

選択ボックスを生成

説明

選択ボックスを生成

使い方

select_tag(オブジェクト名, メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])

オプション

オプション 説明 デフォルト値
:multiple 複数選択を有効にするか  
:disabled 無効化 false
:include_blank 先頭に空の要素を追加するか  
:prompt 指定したオプションを先頭に追加  

HTML属性

HTML属性 説明
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

イベント属性

イベント属性 説明
:onclick クリックされた時
:ondblclick ダブルクリックされた時
:onmousedown マウスのボタンが押し下げられた時
:onmouseup マウスのボタンが離された時
:onmouseover カーソルが重なった時
:onmousemove カーソルが移動した時
:onmouseout カーソルが離れた時
:onkeypress キーが押されて離された時
:onkeydown キーが押し下げられた時
:onkeyup キーが離された時
:onfocus フォーカスされた時
:onblur フォーカスを失った時
:onchange フォーカスを失う際に値が変化していた時

選択ボックスを生成

select_tag "people", options_from_collection_for_select(@people, "id", "name")
# <select id="people" name="people"><option value="1">David</option></select>

選択済みオプションあり

select_tag "people", options_from_collection_for_select(@people, "id", "name", "1")
# <select id="people" name="people"><option value="1" selected="selected">David</option></select>

rawで直接指定

select_tag "people", raw("<option>David</option>")
# <select id="people" name="people"><option>David</option></select>

複数選択を有効

select_tag "colors", raw("<option>Red</option><option>Green</option><option>Blue</option>"), multiple: true
# <select id="colors" multiple="multiple" name="colors[]"><option>Red</option>
# <option>Green</option><option>Blue</option></select>

class属性など指定

select_tag "access", raw("<option>Read</option><option>Write</option>"), multiple: true, class: 'form_input', id: 'unique_id'
# <select class="form_input" id="unique_id" multiple="multiple" name="access[]"><option>Read</option>
# <option>Write</option></select>

先頭に空の要素を追加

select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true
# <select id="people" name="people"><option value="" label=" "></option><option value="1">David</option></select>

先頭に指定した文字列を追加

select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: "All"
# <select id="people" name="people"><option value="">All</option><option value="1">David</option></select>

指定したオプションを先頭に追加

select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something"
# <select id="people" name="people"><option value="">Select something</option><option value="1">David</option></select>

無効化

select_tag "destination", raw("<option>NYC</option><option>Paris</option><option>Rome</option>"), disabled: true
# <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
# <option>Paris</option><option>Rome</option></select>

ソースコード

モデルからラジオボタンを自動生成

説明

モデルからラジオボタンを自動生成

使い方

collection_radio_buttons(オブジェクト名, コレクション名, メソッド名, value値 [, オプション])

f.object

f.collection_radio_buttons(メソッド名, コレクション名, value値 [, オプション])

オプション

オプション 説明
:checked チェックの有無
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

collection_radio_buttons

モデルからラジオボタンを自動生成
collection_radio_buttons(:post, :author_id, Author.all, :id, :name_with_initial)
ブロックで指定
collection_radio_buttons(:post, :author_id, Author.all, :id, :name_with_initial) do |b|
  b.label { b.radio_button }
end

f.collection_radio_buttons

モデルからラジオボタンを自動生成
form_for @post do |f|
  f.collection_radio_buttons :author_id, Author.all, :id, :name_with_initial
  f.submit
end

ソースコード

モデルからチェックボックスを自動生成

説明

モデルからチェックボックスを自動生成

使い方

collection_check_boxes(オブジェクト名, メソッド名, コレクション名 [, オプション, checked_value = "1", unchecked_value = "0"])

f.object

f.collection_check_boxes(メソッド名, コレクション名 [, オプション, checked_value = "1", unchecked_value = "0"])

オプション

オプション 説明
:checked チェックボックスのチェックの有無
:size フォームの幅
:maxlength 入力フィールドに入力可能な最大文字数
:accept フォームで受付可能なMIMEタイプ
:readonly フォームの内容変更禁止
:disabled 無効化
:tabindex Tabキーによる入力欄の移動順
:accesskey フォームに移動するショートカットキー
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

collection_check_boxes

モデルからチェックボックスを自動生成
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial)
ブロックで指定
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial) do |b|
  b.label { b.check_box }
end

f.collection_check_boxes

モデルからチェックボックスを自動生成
<%= form_for @post do |f| %>
  <%= f.collection_check_boxes :author_ids, Author.all, :id, :name_with_initial %>
  <%= f.submit %>
<% end %>

ソースコード

おまけ

Rails6のForm関連のメソッドの説明とバージョン情報を一枚の画像にまとめました