Railsドキュメント

フォーム(form)

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

説明

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

使い方

form_for(モデルオブジェクト, オプション={}, ブロック引数)

オプション

オプション 説明 デフォルト値
: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(リンク先={}, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

オプション

オプション 説明
: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(model: モデル=nil, scope: スコープ=nil, url: URL=nil, format: フォーマット=nil, オプション引数, ブロック引数)

オプション

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

チェックボックス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" />

チェックボックスOFF(f.check_box)

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" />

ソースコード

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

説明

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

使い方

check_box_tag(要素名, value値='1', checked=false, オプション={}, 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" />

ソースコード

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

説明

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

使い方

collection_check_boxes(要素名, メソッド名, コレクション名, オプション={}, checked_value={}, ブロック引数)

# f.object
f.collection_check_boxes(メソッド名, コレクション名, オプション={}, checked_value={}, ブロック引数)

オプション

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

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

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

ソースコード

ラジオボタンを生成

説明

ラジオボタンを生成

使い方

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 基本言語

ラジオボタン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" />

ラジオボタンOFF(f.radio_button)

f.radio_button 'category', 'rails_base'
#=> <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

ソースコード

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

説明

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

使い方

radio_button_tag(要素名, value値, checked=false, オプション={}, 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

radio_button_tag 'page[category]', 'rails_base'
#=> <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

ラジオボタンON

radio_button_tag 'page[category]', 'rails_base', true
#=> <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />

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

radio_button_tag '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_tag 'page[category]', 'rails_base','', {tabindex: 1}
#=> <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" />

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

radio_button_tag 'page[category]', 'rails_base','', {accesskey: 'k'}
#=> <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" />

ソースコード

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

説明

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

使い方

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(: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

ソースコード

ラベルタグを生成

説明

labelタグを生成

使い方

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

# f.object
f.label(メソッド名, ラベル配下のコンテンツ=nil, オプション=nil, ブロック引数)

オプション

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

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>

ソースコード

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

説明

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

使い方

label_tag(要素名=nil, ラベル配下のコンテンツ=nil, HTML属性=nil or イベント属性=nil, ブロック引数)

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 :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" />

ソースコード

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

説明

テキストボックスを生成

使い方

text_field_tag(要素名, value値=nil, オプション={}, 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" />

ソースコード

テキストエリアを生成

説明

テキストエリアを生成

使い方

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

# f.object
f.text_area(メソッド名, 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 キーが押されて離された時

テキストエリアを生成

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="20" id="page_content" name="page[content]" rows="10"></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>

ソースコード

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

説明

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

使い方

text_area_tag(要素名, エリア配下のテキスト, オプション={}, 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>

ソースコード

リッチテキストコンテンツエリア

説明

リッチテキストコンテンツエリア

使い方

rich_text_area(要素名, メソッド名, オプション={})

# f.object
f.rich_text_area(メソッド名, オプション={})

オプション

オプション 説明 デフォルト値
:class デフォルトのスタイルが適用 trix-content
:value HTMLのinputタグにデフォルト値を追加  

form_with(model: @message) do |form|
    form.rich_text_area :content
end
#=> <input type="hidden" name="message[content]" id="message_content_trix_input_message_1"><trix-editor id="content" input="message_content_trix_input_message_1" class="trix-content" ...></trix-editor>

form_with(model: @message) do |form|
    form.rich_text_area :content, value: "<h1>Default message</h1>"
end
#=> <input type="hidden" name="message[content]" id="message_content_trix_input_message_1" value="<h1>Default message</h1>"><trix-editor id="content" input="message_content_trix_input_message_1" class="trix-content" ...></trix-editor>

ソースコード

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

説明

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

使い方

password_field(オブジェクト名, メソッド名, オプション={})

# f.object
f.password_field(メソッド名, オプション={})

オプション

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

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

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" />

ソースコード

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

説明

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

使い方

password_field_tag(要素名='password', value値=nil, オプション={}, 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" />

ソースコード

与えられたフィールドのHTMLのid属性値を生成

説明

与えられたフィールドのHTMLのid属性値を生成

使い方

field_id(オブジェクト名, メソッド名, 接尾語, index: インデックス)

# f.object
f.field_id(フィールド, 接尾語, index: インデックス)

与えられたフィールドのHTMLのid属性値を生成

text_field_tag :post, :title, aria: { describedby: field_id(:post, :title, :error) }

与えられたフィールドのHTMLのid属性値を生成(f.object)

form_for @post do |f|
    f.label :title
    f.text_field :title, aria: { describedby: f.field_id(:title, :error) }
    tag.span("is blank", id: f.field_id(:title, :error)
end

ソースコード

隠しフィールドを生成

説明

隠しフィールドの生成

使い方

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 :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_tag(要素名, value値=nil, 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" />

ソースコード

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

説明

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

使い方

file_field(オブジェクト名, メソッド名, オプション={})

# f.object
f.file_field(メソッド名, オプション={})

オプション

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

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

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" />

ソースコード

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

説明

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

使い方

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" />

ソースコード

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

説明

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

使い方

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

# f.object
f.email_field(メソッド名, オプション={}, 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 :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" /

ソースコード

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

説明

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

使い方

email_field_tag(要素名, value値=nil, オプション={}, 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 :product, :price

数値入力ボックスを生成(f.number_field)

f.number_field :confirmed

ソースコード

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

説明

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

使い方

number_field_tag(要素名, value値=nil, オプション={})

オプション

オプション 説明
: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(:product, :discount, in: 1..100)
範囲選択バーを生成(f.range_field)
f.range_field(:discount, in: 1..100)

ソースコード

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

説明

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

使い方

range_field_tag(要素名, 値=nil, オプション={})

オプション

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

範囲選択バーを生成

range_field "discount", in: 1..100

min, maxで指定

range_field "discount", min: 1, max: 100

ソースコード

検索ボックスを生成

説明

検索ボックスを生成

使い方

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(: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値=nil, オプション={})

オプション

オプション 説明
: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(オブジェクト名, メソッド名, オプション={})
phone_field(オブジェクト名, メソッド名, オプション={})

# f.object
f.telephone_field(メソッド名, オプション={})
f.phone_field(メソッド名, オプション={})

オプション

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

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

telephone_field("user", "phone")
#=> <input id="user_phone" name="user[phone]" type="tel" />

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

f.telephone_field("phone")

ソースコード

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

説明

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

使い方

telephone_field_tag(要素名, value値=nil, オプション={})

オプション

オプション 説明
: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入力ボックスを生成(url_field)

url_field("user", "homepage")
#=> <input id="user_homepage" name="user[homepage]" type="url" />

URL入力ボックスを生成(f.url_field)

f.url_field("user", "homepage")
#=> <input id="user_homepage" name="user[homepage]" type="url" />

ソースコード

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

説明

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

使い方

url_field_tag(要素名, value値=nil, オプション={}, 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" />

ソースコード

色の入力欄を生成

説明

色の入力欄を生成

使い方

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

# f.object
f.color_field(メソッド名, オプション={}, 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 "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" />

ソースコード

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

説明

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

使い方

color_field_tag(要素名, 値=nil, オプション={}, 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 "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値=nil, オプション={}, 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" />

ソースコード

時間の入力欄を生成

説明

時間の入力欄を生成

使い方

time_field(要素名, メソッド, オプション={})

# f.object
f.time_field(メソッド, オプション={})

オプション

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

時間の入力欄を生成

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(要素名, 値=nil, オプション={}, HTML属性={} or イベント属性={})

オプション

オプション 説明
:min 最少値
:max 最大値
:step 許容値の粒度
:include_seconds 出力のタイムスタンプ形式に秒とミリ秒を含める

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

最小値を指定

time_field_tag "task", nil, min: Time.now

ソースコード

日時の入力欄を生成

説明

日時の入力欄を生成

使い方

datetime_field(要素名, メソッド, オプション={})

# f.object
f.datetime_field(メソッド, オプション={})

オプション

オプション 説明
: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("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" />

ソースコード

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

説明

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

使い方

datetime_field_tag(要素名, 値=nil, オプション={}, 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_tag "user", "名前", min: Date.today
#=> <input id="user" name="user" type="datetime-local" min="2021-11-07T00:00:00.000" />

ソースコード

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

説明

ローカル日時の入力欄を生成
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("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" />

ソースコード

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

説明

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

使い方

datetime_local_field_tag(要素名, 値=nil, オプション={}, 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(要素名, メソッド名, オプション={}, HTML属性={} or イベント属性={})

# f.object
f.month_field(メソッド名, オプション={}, 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("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(要素名, 値=nil, オプション={}, 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)

ソースコード

週の入力欄を生成

説明

週の入力欄を生成

使い方

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(要素名, 値=nil, オプション={})

オプション

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

week_field_tag :wk

ソースコード

選択ボックスを生成

説明

選択ボックスを生成

使い方

select(オブジェクト名, メソッド名, 要素(配列 or ハッシュ)=nil, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

# f.object
f.select(メソッド名, 要素(配列 or ハッシュ)=nil, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

オプション

オプション 説明 デフォルト値
:multiple 複数選択を有効にするか  
:disabled 無効化 false
:include_blank 先頭に空の要素を追加(true or 文字列)  
: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("post", "person_name", ["佐藤", "鈴木", "高橋"])

先頭に空の要素を追加

select("post", "person_name", ["佐藤", "鈴木", "高橋"], { include_blank: "選択してください" })

リストボックスを生成

select("post", "person_name", ["佐藤", "鈴木", "高橋"], { multiple: true })
選択ボックスを生成(f.select)
f.select(:person_name, ["佐藤", "鈴木", "高橋"])

ソースコード

選択ボックスを生成

説明

選択ボックスを生成

使い方

select_tag(要素名, オプションタグ=nil, オプション={}, 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>

ソースコード

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

説明

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

使い方

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

タグの情報を配列で指定

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(グループオプション, 選択したキー=nil, オプション={})

オプション

オプション 説明
: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の項目, 選択された要素=nil)

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

ソースコード

選択ボックスを生成

説明

選択ボックスを生成

使い方

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

選択ボックスを生成

options_from_collection_for_select @categories, :id, :name

選択された要素あり

options_from_collection_for_select @categories, :id, :name, 2

ソースコード

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

説明

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

使い方

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

# f.object
f.collection_select(メソッド名, 要素の配列, value属性の項目, テキストの項目, オプション={}, 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(: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>

ソースコード

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

説明

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

使い方

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

# f.object
f.grouped_collection_select(メソッド名, オブジェクトの配列, タグを取得するメソッド, タグのラベル, valueの項目, テキストの項目, オプション={}, 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(:page, :name, @categories, :pages, :name, :id, :name)

空のオプションを先頭に追加

grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, include_blank: true)

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

grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, :prompt = "選択してください")

選択したオプション

grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name)

選択ボックスをグループ化(f.grouped_collection_select)

f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name)

ソースコード

タイムゾーンの選択ボックス

説明

タイムゾーンの選択ボックス

使い方

time_zone_select(オブジェクト名, メソッド名, プライオリティゾーン=nil, オプション={}, HTML属性={} or イベント属性={})

# f.object
f.time_zone_select(メソッド名, プライオリティゾーン=nil, オプション={}, 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 フォーカスを失う際に値が変化していた時

タイムゾーンの選択ボックス

time_zone_select(:user, :time_zone, nil, include_blank: true)
time_zone_select(:user, :time_zone, nil, default: "Pacific Time (US & Canada)")
time_zone_select(:user, :time_zone, ActiveSupport::TimeZone.us_zones, default: "Pacific Time (US & Canada)")
time_zone_select(:user, :time_zone, [ ActiveSupport::TimeZone["Alaska"], ActiveSupport::TimeZone["Hawaii"] ])
time_zone_select(:user, :time_zone, /Australia/)
time_zone_select(:user, :time_zone, ActiveSupport::TimeZone.all.sort, model: ActiveSupport::TimeZone)

タイムゾーンの選択ボックス(f.object)

form_for @user do |f|
    f.time_zone_select :time_zone, nil, include_blank: true
    f.submit
end

ソースコード

日付選択ボックスを生成

説明

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

使い方

date_select(要素名, メソッド名, オプション={}, HTML属性={} or イベント属性={})

# f.object
f.date_select(メソッド名, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

日付選択を生成

date_select("article", "written_on")

1995年から始まる年号のドロップダウンボックスに入力

date_select("article", "written_on", start_year: 1995)

年号のドロップダウンボックスが1995から始まり、月が単語ではなく数字で表され、日付けのセレクトボックスがない

date_select("article", "written_on", start_year: 1995, use_month_numbers: true, discard_day: true, include_blank: true)

月と日に2桁の数字

date_select("article", "written_on", use_two_digit_numbers: true)

日、月、年の順で並べる

date_select("article", "written_on", order: [:day, :month, :year])

年フィールドがない

date_select("user", "birthday", order: [:month, :day])

初期値は現在の日付から3日後の日付に設定

date_select("article", "written_on", default: 3.days.from_now)

今日の日付でフォームに設定

date_select("article", "written_on", selected: Date.today)

デフォルトの日数は20

date_select("credit_card", "bill_due", default: { day: 20 })

カスタムプロンプトを含む日付選択を生成

date_select("article", "written_on", prompt: { day: 'Select day', month: 'Select month', year: 'Select year' })

カスタム年のフォーマットで日付選択を生成

date_select("article", "written_on", year_format: ->(year) { "Heisei #{year - 1988}" })

カスタムデイフォーマットで日付選択を生成

date_select("article", "written_on", day_format: ->(day) { day.ordinalize })

日付の入力に特化した選択ボックスを生成(f.date_select)

form_for @person do |f|
  f.date_select :birth_date
  f.submit
end

ソースコード

時間選択ボックスを生成

説明

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

使い方

time_select(要素名, メソッド名, オプション={}, HTML属性={} or イベント属性={})

# f.object
f.time_select(メソッド名, オプション={}, HTML属性={} or イベント属性={})

オプション

オプション 説明
: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("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

日時選択ボックスを生成

説明

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

使い方

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

# f.object
f.datetime_select(メソッド名, オプション={}, 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 :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>

ソースコード

日付選択ボックスを生成

説明

日付選択ボックスを生成

使い方

select_date(日付=Date.current, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定された日付をデフォルトとする日付選択を生成

my_date = Time.now + 6.days
select_date(my_date)

今日をデフォルトとする日付選択を生成

select_date()

年、月、日の順番

my_date = Time.now + 6.days
select_date(my_date, order: [:year, :month, :day])

フィールドのタイプを破棄

my_date = Time.now + 6.days
select_date(my_date, discard_type: true)

「\/」で区切られた日付

my_date = Time.now + 6.days
select_date(my_date, date_separator: '/')

ソースコード

日時選択ボックスを生成

説明

日時選択ボックスを生成

使い方

select_datetime(日時=Time.current, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定された日付をデフォルトとする日時選択を生成

my_date_time = Time.now + 4.days
select_datetime(my_date_time)

今日をデフォルトとする日時選択を生成

select_datetime()

年、月、日の順番

my_date_time = Time.now + 4.days
select_datetime(my_date_time, order: [:year, :month, :day])

フィールドのタイプを破棄

my_date_time = Time.now + 4.days
select_datetime(my_date_time, discard_type: true)

「\/」で区切られた日付

my_date_time = Time.now + 4.days
select_datetime(my_date_time, date_separator: '/')

ソースコード

日にち選択ボックスを生成

説明

日にち選択ボックスを生成

使い方

select_day(日付, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定された日にちをデフォルトとする日にち選択を生成

my_date = Time.now + 2.days
select_day(my_date)

指定された数をデフォルトとする日にち選択を生成

select_day(5)

日にちを2桁で表示

select_day(5, use_two_digit_numbers: true)

ソースコード

時間選択ボックスを生成

説明

時間選択ボックスを生成

使い方

select_time(時間=Time.current, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定した時間をデフォルトとする時間選択を生成

my_time = Time.now + 5.days + 7.hours + 3.minutes + 14.seconds
select_time(my_time)

現在時刻をデフォルトとする時間選択を生成

select_time()

ソースコード

年選択ボックスを生成

説明

年選択ボックスを生成

使い方

select_year(日付, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

select_year(Date.today, start_year: 1992, end_year: 2007)

ソースコード

月選択ボックスを生成

説明

月選択ボックスを生成

使い方

select_month(日付, オプション={} 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

今日の月をデフォルトとする月選択を生成

select_month(Date.today)

月を2桁表示

select_month(Date.today, use_month_numbers: true)

ソースコード

時間選択ボックスを生成

説明

時間選択ボックスを生成

使い方

select_hour(時間, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定された日にちをデフォルトとする日にち選択を生成

my_time = Time.now + 6.hours
select_hour(my_time)

指定された数をデフォルトとする時間選択を生成

select_hour(13)

ソースコード

分選択ボックスを生成

説明

分選択ボックスを生成

使い方

select_minute(時間, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定された日にちをデフォルトとする日にち選択を生成

my_time = Time.now + 10.minutes
select_hour(my_time)

指定された数をデフォルトとする時間選択を生成

select_minute(14)

ソースコード

秒選択ボックスを生成

説明

秒選択ボックスを生成

使い方

select_second(時間, オプション={}, 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 時間の区切り文字
:datetime_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 フォーカスを失う際に値が変化していた時

指定した秒をデフォルトとする秒選択を生成

my_time = Time.now + 16.seconds
select_second(my_time)

指定された数字をデフォルトとする秒選択を生成

select_second(33)

ソースコード

曜日のオプションタグを生成

説明

曜日のオプションタグを生成

使い方

weekday_options_for_select(選択=nil, index_as_value: 曜日のインデックスを値として使用するか=false, day_format: 曜日のフォーマット=:day_names, beginning_of_week: 週初め=Date.beginning_of_week)

ソースコード

曜日のセレクトタグとオプションタグを生成

説明

曜日のセレクトタグとオプションタグを生成

使い方

weekday_select(要素名, メソッド, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

# f.object
.weekday_select(メソッド, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

f.weekday_select :weekday, include_blank: true

ソースコード

HTMLのタイムタグを生成

説明

HTMLのタイムタグを生成

使い方

time_tag(DateかTime, 引数.., ブロック引数)

タイムタグを生成

time_tag Date.today
#=> <time datetime="2010-11-04">November 04, 2010</time>

ブロック

<%= time_tag Time.now do %>
    <span>Right now</span>
<% end %>
#=> <time datetime="2010-11-04T17:55:45+01:00"><span>Right now</span></time>

サブミットボタンを生成

説明

サブミットボタンを生成

使い方

f.submit(ボタンの名前=nil, オプション={})

オプション

オプション 説明
: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(ボタンの名前='Save changes', オプション={}, 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?" />

ソースコード

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

説明

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

使い方

image_submit_tag(値, オプション={}, 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" />

ソースコード

ボタンを生成

説明

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

使い方

button(文字列=nil, オプション={}, データ属性={} or HTML属性={} or イベント属性={}, ブロック引数)

# f.object
f.button(文字列=nil, オプション={}, データ属性={} 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>

ボタンを生成(f.object)

f.button

ソースコード

汎用的なボタンを生成

説明

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

使い方

button_tag(オプション=nil or データ属性=nil or HTML属性=nil or イベント属性=nil, ブロック引数)

オプション

オプション 説明
: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>

ソースコード

2つの時間のおおよその経過時間

説明

2つの時間のおおよその経過時間

使い方

distance_of_time_in_words(開始時間, 終了時間=0, オプション={})

from_time = Time.now
distance_of_time_in_words(from_time, from_time + 50.minutes)                                #=> about 1 hour
distance_of_time_in_words(from_time, 50.minutes.from_now)                                   #=> about 1 hour
distance_of_time_in_words(from_time, from_time + 15.seconds)                                #=> less than a minute
distance_of_time_in_words(from_time, from_time + 15.seconds, include_seconds: true)         #=> less than 20 seconds
distance_of_time_in_words(from_time, 3.years.from_now)                                      #=> about 3 years
distance_of_time_in_words(from_time, from_time + 60.hours)                                  #=> 3 days
distance_of_time_in_words(from_time, from_time + 45.seconds, include_seconds: true)         #=> less than a minute
distance_of_time_in_words(from_time, from_time - 45.seconds, include_seconds: true)         #=> less than a minute
distance_of_time_in_words(from_time, 76.seconds.from_now)                                   #=> 1 minute
distance_of_time_in_words(from_time, from_time + 1.year + 3.days)                           #=> about 1 year
distance_of_time_in_words(from_time, from_time + 3.years + 6.months)                        #=> over 3 years
distance_of_time_in_words(from_time, from_time + 4.years + 9.days + 30.minutes + 5.seconds) #=> about 4 years

ソースコード

現在までのおおよその経過時間

説明

現在までのおおよその経過時間

使い方

distance_of_time_in_words_to_now(開始時間, オプション={})

from_time = Time.now
distance_of_time_in_words_to_now(from_time + 50.minutes)
#=> about 1 hour

ソースコード

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

説明

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

使い方

fields_for(名前, モデル=nil, オプション={}, ブロック引数)

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

<%= fields_for :permission, @person.permission do |permission_fields| %>
  Admin?  : <%= permission_fields.check_box :admin %>
<% end %>

簡略化

<%= fields_for :permission do |permission_fields| %>
  Admin?: <%= permission_fields.check_box :admin %>
<% end %>

モデル自体を渡す

<%= fields_for @person.permission do |permission_fields| %>
  Admin?: <%= permission_fields.check_box :admin %>
<% end %>

ソースコード

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

説明

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

使い方

field_set_tag(サブフォームのタイトル=nil, HTML属性=nil or イベント属性=nil, ブロック引数)

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 フォーカスを失う際に値が変化していた時

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

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

サブフォームのタイトルを指定

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

ソースコード

入力フィールドのスコープを指定

説明

入力フィールドのスコープを指定

使い方

fields(スコープ=nil, model: モデル=nil, オプション引数, ブロック引数)

# f.object
f.fields(スコープ=nil, model: モデル=nil, オプション引数, ブロック引数)

オプション

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

fields :comment do |fields|
    fields.text_field :body
end

ソースコード