特定のモデルに特化したフォームを生成
layout: page
説明
特定のモデルに特化したフォームを生成
form_withの利用を推奨(Rails5.1以降はform_forとform_tagはform_withに統合されたため)
使い方
form_for(モデルオブジェクト [, オプション]) do |f|
フォームの本体
end
オプション
オプション | 説明 | デフォルト値 |
---|---|---|
:as | ハッシュのキー名前 | |
:url | フォームの送信先 | |
:namespace | 名前空間の設定 | |
:method | メソッド(get, post, patch, put, deleteなど) | |
:authenticity_token | 認証トークン | |
:remote | JavaScriptを使うか | false |
:enforce_utf8 | utf8用の非表示用を出力するか? | true |
:html | タグの属性 | |
:format | フォーマット |
例
特定のモデルに特化したフォームを生成
form_for(@user) do |f|
end
# <form action="/users" class="new_user" id="new_user" method="post">
# </form>
urlオプション
form_for @user, url: {action: 'update'} do |f|
end
# <form action="/users/update" class="new_user" id="new_user" method="post">
# </form>
HTML属性を指定
form_for(@user, html: {multipart: true}) do |f|
end
# <form action="/users" class="new_user" enctype="multipart/form-data" id="new_user" method="post">
# </form>
ハッシュのキー名を変更
form_for(@person, as: :client) do |f|
end
# params[:client]で取得できるようになる
フォーマット指定
form_for(@post, format: :json) do |f|
end
JavaScriptを使用
form_for(@post, remote: true) do |f|
end
# <form action='http://www.example.com' method='post' data-remote='true'>
# <input name='_method' type='hidden' value='patch' />
# </form>
HTML属性を指定
form_for(@post, data: { behavior: "autosave" }, html: { name: "go" }) do |f|
end
# <form action='http://www.example.com' method='post' data-behavior='autosave' name='go'>
# <input name='_method' type='hidden' value='patch' />
# </form>
外部リソースへのForm
form_for @invoice, url: external_url, authenticity_token: 'external_token' do |f|
end
認証トークンを使わない外部リソースへのForm
form_for @invoice, url: external_url, authenticity_token: false do |f|
end
ソースコード
汎用的なフォームを生成
layout: page
説明
汎用的なフォームを生成
form_withの利用を推奨(Rails5.1以降はform_forとform_tagはform_withに統合されたため)
使い方
form_tag(リンク先 [オプション or HTML属性 or イベント属性]) do
end
オプション
オプション | 説明 |
---|---|
:multipart | マルチパートを指定 |
:method | HTTPメソッドを指定 |
:authenticity_token | 認証トークンを指定 |
:remote | Ajaxでリンクを処理 |
:enforce_utf8 | utf8用の非表示用を出力するか? |
HTML属性
HTML属性 | 説明 |
---|---|
:name | 名称 |
:size | サイズ。ピクセル数で指定 |
:readonly | 内容変更を禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | 移動するショートカットキー |
:usemap | この画像に対応させるイメージマップ |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
基本形(オプションなし)
<%= form_tag('/users') do %>
<% end %>
# <form action="users" method="put">
# </form>
putメソッド指定
<%= form_tag('/users', method: :put) do %>
<% end %>
# <form action="users" method="post">
# </form>
multipart指定
<%= form_tag('/users', multipart: true) do %>
<% end %>
# <form action="users" method="post" enctype="multipart/form-data">
# </form>
JavaScriptを使う
<%= form_tag('/posts', remote: true) %>
# <form action="/posts" method="post" data-remote="true">
外部リソースへのForm
form_tag('http://far.away.com/form', authenticity_token: "cf50faa3fe97702ca1ae")
ソースコード
モデルなどからフォームタグを生成
layout: page
説明
URL、スコープ、モデルなどからフォームタグを生成
使い方
form_with(モデル or スコープ or URL [, オプション])
オプション
オプション | 説明 | デフォルト値 |
---|---|---|
:url | URLを指定 | |
:method | HTTPメソッドを指定 | POST |
:format | フォーマットを指定 | text/html |
:scope | スコープを指定 | |
:namespace | 名前空間を指定 | |
:model | モデルを指定 | |
:authenticity_token | 認証トークンを指定 | |
:local | リモート送信の無効 | false |
:skip_enforcing_utf8 | 送信時にutf8という名前の隠しフィールドを非表示 | false |
:builder | フォームで使うモデルをオーバライド | |
:id | id属性を指定 | |
:class | class属性を指定 | |
:data | data属性を指定 | |
:html | id、class、data以外のHTMLタグ |
例
URLからフォームを生成(form_tag的な使い方)
<%= form_with url: posts_path do |form| %>
<%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
# <input type="text" name="title">
# </form>
モデルを指定してフォームを生成(form_for的な使い方)
<%= form_with model: Post.new do |form| %>
<%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
# <input type="text" name="post[title]">
# </form>
スコープを指定してフォームを生成
<%= form_with scope: :post, url: posts_path do |form| %>
<%= form.text_field :title %>
<% end %>
# <form action="/posts" method="post" data-remote="true">
# <input type="text" name="post[title]">
# </form>
開始タグのみ生成
form_with(model: @post, url: super_posts_path)
form_forやform_tagとの違い
- デフォルトではid属性やclass属性は付与されない
- デフォルトでremote: trueが付与
- モデルの属性にない値も指定が可能
ソースコード
チェックボックスを生成
layout: page
説明
チェックボックスを生成
使い方
check_box(オブジェクト名, メソッド名 [, オプション, checked_value = "1", unchecked_value = "0"])
f.object
f.check_box(メソッド名 [, オプション, checked_value = "1", unchecked_value = "0"])
オプション
オプション | 説明 |
---|---|
:checked | チェックボックスのチェックの有無 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
check_box
チェックボックスOFF
check_box 'page', 'freezeflag', {}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
チェックボックスON
check_box 'page', 'freezeflag', {checked: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
利用禁止
check_box 'page', 'freezeflag', {disabled: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
Tabキーによる入力欄の移動順
check_box 'page', 'freezeflag', {tabindex: 1}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />
フォームに移動するショートカットキー
check_box 'page', 'freezeflag', {accesskey: 'k'}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
f.check_box
チェックボックスOFF
f.check_box 'freezeflag', {}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
チェックボックスON
f.check_box 'freezeflag', {checked: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
利用禁止
f.check_box 'freezeflag', {disabled: true}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
Tabキーによる入力欄の移動順
f.check_box 'freezeflag', {tabindex: 1}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />
フォームに移動するショートカットキー
f.check_box 'freezeflag', {accesskey: 'k'}, true, false
# <input name="page[freezeflag]" type="hidden" value="false" /><input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
ソースコード
汎用的なチェックボックスを生成
layout: page
説明
モデルと関連のないチェックボックスを生成
使い方
check_box_tag(要素名 [, value値, checked = false, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
HTML属性
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
チェックボックスOFF
check_box_tag 'page[freezeflag]', true, false, {}
# <input id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
チェックボックスON
check_box_tag 'page[freezeflag]', true, true, {}
# <input checked="checked" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
利用禁止
check_box_tag 'page[freezeflag]', true, false, {disabled: true}
# <input disabled="disabled" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
Tabキーによる入力欄の移動順
check_box_tag 'page[freezeflag]', true, false, {tabindex: 1}
# <input id="page_freezeflag" name="page[freezeflag]" tabindex="1" type="checkbox" value="true" />
フォームに移動するショートカットキー
check_box_tag 'page[freezeflag]', true, false, {accesskey: 'k'}
# <input accesskey="k" id="page_freezeflag" name="page[freezeflag]" type="checkbox" value="true" />
ソースコード
ラジオボタンを生成
layout: page
説明
ラジオボタンを生成
使い方
radio_button(オブジェクト名, メソッド名, value値 [, オプション])
f.object
f.radio_button(メソッド名, value値 [, オプション])
オプション
オプション | 説明 |
---|---|
:checked | チェックの有無 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
radio_button
ラジオボタンOFF
radio_button 'page', 'category', 'rails_base'
# <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
ラジオボタンON
radio_button 'page', 'category', 'rails_base', checked: true
# <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
フォームの項目の利用禁止
radio_button 'page', 'category', 'rails_base', disabled: true
# <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
Tabキーによる入力欄の移動順
radio_button 'page', 'category', 'rails_base', tabindex: 1
# <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" />
フォームに移動するショートカットキー
radio_button 'page', 'category', 'rails_base', accesskey: 'k'
# <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
f.radio_button
ラジオボタンOFF
f.radio_button 'category', 'rails_base'
# <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
ラジオボタンON
f.radio_button 'category', 'rails_base', checked: true
# <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
フォームの項目の利用禁止
f.radio_button 'category', 'rails_base', disabled: true
# <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
Tabキーによる入力欄の移動順
f.radio_button 'category', 'rails_base', tabindex: 1
# <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" />
フォームに移動するショートカットキー
f.radio_button 'category', 'rails_base', accesskey: 'k'
# <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
ソースコード
汎用的なラジオボックスを生成
layout: page
説明
モデルと関連のないラジオボタンを生成
使い方
radio_button_tag(要素名, value値 [, checked = false, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
HTML属性
HTML属性 | 説明 |
---|---|
:checked | チェックの有無 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
ラジオボタンOFF
Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base' %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base' %>
# Railsの基礎知識: <input id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />
ラジオボタンON
Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base' %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base' %>
# Railsの基礎知識: <input checked="checked" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input checked="checked" id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />
フォームの項目の利用禁止
Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {disabled: true} %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base','', {disabled: true} %>
# Railsの基礎知識: <input disabled="disabled" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input disabled="disabled" id="page_category_ruby_base" name="page[category]" type="radio" value="ruby_base" />
Tabキーによる入力欄の移動順
Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {tabindex: 1} %><br />
Rubeの基礎知識: <%= radio_button_tag 'page[category]', 'ruby_base','', {tabindex: 2} %>
# Railsの基礎知識: <input id="page_category_rails_base" name="page[category]" tabindex="1" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input id="page_category_ruby_base" name="page[category]" tabindex="2" type="radio" value="ruby_base" />
フォームに移動するショートカットキー
Railsの基礎知識: <%= radio_button_tag 'page[category]', 'rails_base','', {accesskey: 'k'} %><br />
Rubeの基礎知識: < %= radio_button_tag 'page[category]', 'ruby_base','', {accesskey: 'l'} %>
# Railsの基礎知識: <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" /><br />
# Rubeの基礎知識: <input accesskey="k" id="page_category_rails_base" name="page[category]" type="radio" value="rails_base" />
class名を指定
radio_button_tag 'color', "green", true, class: "color_input"
# <input checked="checked" class="color_input" id="color_green" name="color" type="radio" value="green" />
ソースコード
テキストエリアを生成
layout: page
説明
テキストエリアを生成
使い方
text_area(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])
f.object
f.text_area(メソッド名 [, オプション])
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
例
text_area
テキストエリアを生成
text_area :page, :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20"></textarea>
初期値あり
text_area :page, :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20">初期値</textarea>
フォームの幅(20x10)
text_area :page, :comtent, size: "20x10"
# <textarea cols="20" id="page_content" name="page[content]" rows="10"></textarea>
入力フィールドに入力可能な最大文字数
text_area :page, :comtent, maxlength: "20"
# <textarea cols="40" id="page_content" maxlength="20" name="page[content]" rows="20"></textarea>
フォームの項目の利用禁止
text_area :page, :comtent, maxlength: "20"
# <textarea cols="40" disabled ="disabled" id="page_content" name="page[content]" rows="20"></textarea>
f.text_area
テキストエリアを生成
f.text_area :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20"></textarea>
初期値あり
f.text_area :comtent
# <textarea cols="40" id="page_content" name="page[content]" rows="20">初期値</textarea>
フォームの幅(20x10)
f.text_area :comtent, size: "20x10"
# <textarea cols="20" id="page_content" name="page[content]" rows="10"></textarea>
入力フィールドに入力可能な最大文字数
f.text_area :comtent, maxlength: "20"
# <textarea cols="40" id="page_content" maxlength="20" name="p>ge[content]" rows="20"></textarea>
フォームの項目の利用禁止
f.text_area :comtent, maxlength: "20"
# <textarea cols="40" disabled ="disabled" id="page_content" name="page[content]" rows="20"></textarea>
ソースコード
汎用的なテキストエリアを生成
layout: page
説明
モデルと関連のないテキストエリアを生成
使い方
text_area_tag(要素名 [, エリア配下のテキスト, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:rows | rowsの設定 |
:cols | columnsの設定 |
:disabled | 無効化 |
:escape | HTMLをエスケープするか |
HTML属性
HTML属性 | 説明 |
---|---|
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
例
テキストエリアを生成
text_area_tag 'post'
# <textarea id="post" name="post"></textarea>
テキストエリアに表示する文字列を指定
text_area_tag 'bio', @user.bio
# <textarea id="bio" name="bio">This is my biography.</textarea>
カラム数などを指定
text_area_tag 'body', nil, rows: 10, cols: 25
# <textarea cols="25" id="body" name="body" rows="10"></textarea>
フォーム幅を指定
text_area_tag 'body', nil, size: "25x10"
# <textarea name="body" id="body" cols="25" rows="10"></textarea>
無効化
text_area_tag 'description', "Description goes here.", disabled: true
# <textarea disabled="disabled" id="description" name="description">Description goes here.</textarea>
class属性を指定
text_area_tag 'comment', nil, class: 'comment_input'
# <textarea class="comment_input" id="comment" name="comment"></textarea>
ソースコード
パスワード入力ボックスを生成
layout: page
説明
パスワード入力ボックスを生成
使い方
password_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.password_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
password_field
パスワード入力ボックスを生成
password_field :page, :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" />
初期値あり
password_field :page, :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" value="abc" />
フォームの幅
password_field :page, :pass, :size = '40'
# <input id="page_pass" name="page[pass]" size="40" type="password" />
f.password_field
パスワード入力ボックスを生成
f.password_field :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" />
初期値あり
f.password_field :pass
# <input id="page_pass" name="page[pass]" size="30" type="password" value="abc" />
フォームの幅
f.password_field :pass, :size = '40'
# <input id="page_pass" name="page[pass]" size="40" type="password" />
ソースコード
汎用的なパスワード入力ボックス
layout: page
説明
モデルと関連のないパスワード入力ボックスを生成
使い方
password_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
パスワード入力ボックスを生成
password_field_tag 'pass'
# <input id="pass" name="pass" type="password" />
value値を指定
password_field_tag 'secret', 'Your secret here'
# <input id="secret" name="secret" type="password" value="Your secret here" />
class属性を付与
password_field_tag 'masked', nil, class: 'masked_input_field'
# <input class="masked_input_field" id="masked" name="masked" type="password" />
フォーム幅を指定
password_field_tag 'token', '', size: 15
# <input id="token" name="token" size="15" type="password" value="" />
入力可能な最大文字数
password_field_tag 'key', nil, maxlength: 16
# <input id="key" maxlength="16" name="key" type="password" />
無効化
password_field_tag 'confirm_pass', nil, disabled: true
# <input disabled="disabled" id="confirm_pass" name="confirm_pass" type="password" />
ソースコード
隠しフィールドを生成
layout: page
説明
隠しフィールドの生成
使い方
hidden_field(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])
f.object
f.hidden_field(メソッド名 [, HTML属性 or イベント属性]
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
hidden_field
隠しフィールドの生成
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" />
初期値あり
# @page.set = "abc"
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />
class属性を指定
hidden_field :page, :set, :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />
f.hidden_field
隠しフィールドの生成
f.hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" />
初期値あり
hidden_field :page, :set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />
class属性を指定
hidden_field :page, :set, :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />
ソースコード
汎用的な隠しフィールドを生成
layout: page
説明
モデルと関連のない隠しフィールドの生成
使い方
hidden_field_tag(要素名 [, value値, HTML属性 or イベント属性])
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
初期値なし
hidden_field_tag 'page[set]'
# <input id="page_set" name="page[set]" type="hidden" />
初期値あり
hidden_field_tag 'page[set]', @page.set
# <input id="page_set" name="page[set]" type="hidden" value="abc" />
class属性を指定
hidden_field_tag 'page[set]', '', :class = 'set'
# <input class='set' id="page_set" name="page[set]" type="hidden" />
ソースコード
ラベルタグを生成
layout: page
説明
labelタグを生成
使い方
label(オブジェクト名, メソッド名 [, ラベル配下のコンテンツ, オプション])
f.object
f.label(メソッド名 [, ラベル配下のコンテンツ, オプション])
オプション
オプション | 説明 |
---|---|
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
label
labelタグを生成
label(:post, :cost)
# <label for="post_cost">Total cost</label>
ラベル名を指定
label(:post, :title, "A short title")
# <label for="post_title">A short title</label>
class属性を付与
label(:post, :title, "A short title", class: "title_label")
# <label for="post_title" class="title_label">A short title</label>
ブロック指定
label(:post, :terms) do
raw('Accept <a href="/terms">Terms</a>.')
end
# <label for="post_terms">Accept <a href="/terms">Terms</a>.</label>
f.label
ラベル配下のコンテンツなし
f.label :name
# <label for="page_name">Name</label>
ラベル配下のコンテンツあり
f.label :name, @page.name
# <label for="page_name">abc</label>
class属性の指定
f.label :name, '', class: 'page_name'
# <label class="page_name" for="page_name">Name</label>
ソースコード
汎用的なラベルタグを生成
layout: page
説明
モデルと関連のないlabelタグを生成
使い方
label_tag(要素名 [, ラベル配下のコンテンツ] [, HTML属性 or イベント属性])
HTML属性
HTML属性 | 説明 |
---|---|
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
ラベル配下のコンテンツなし
label_tag 'page[name]'
# <label for="page_name">Name</label>
ラベル配下のコンテンツあり
# @page.name = "abc"
label_tag 'page[name]', @page.name
# <label for="page_name">abc</label>
class属性の指定
label_tag 'page[name]', '', class: 'page_name'
# <label class="page_name" for="page_name">Name</label>
ソースコード
テキストボックスを生成
layout: page
説明
テキストボックスを生成
使い方
text_field(オブジェクト名, メソッド名 [, HTML属性 or イベント属性])
f.object
f.text_field(メソッド名 [, HTML属性 or イベント属性])
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
例
text_field
テキストボックスを生成
text_field :page, :name
# <input id="page_name" name="page[name]" size="30" type="text" />
初期値あり
text_field :page, :name
# <input id="page_name" name="page[name]" size="30" type="text" value="abc" />
class属性を指定
text_field :page, :name, :class = 'page_name'
# <input class="page_name" id="page_name" name="page[name]" size="30" type="text" />
f.text_field
テキストボックスを生成
f.text_field :name
# <input id="page_name" name="page[name]" size="30" type="text" />
初期値あり
f.text_field :name
# <input id="page_name" name="page[name]" size="30" type="text" value="abc" />
class属性を指定
f.text_field :name, :class = 'page_name'
# <input class="page_name" id="page_name" name="page[name]" size="30" type="text" />
ソースコード
汎用的なテキストボックスを生成
layout: page
説明
テキストボックスを生成
使い方
text_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | 幅 |
:maxlength | 入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
基本的な使い方
text_field_tag 'name'
# <input id="name" name="name" type="text" />
値を指定
text_field_tag 'query', 'Enter your search query here'
# <input id="query" name="query" type="text" value="Enter your search query here" />
フォーカスが当たるまでデフォルト表示される文字列を指定
text_field_tag 'search', nil, placeholder: 'Enter search term...'
# <input id="search" name="search" placeholder="Enter search term..." type="text" />
HTML属性を指定
text_field_tag 'request', nil, class: 'special_input'
# <input class="special_input" id="request" name="request" type="text" />
サイズを指定
text_field_tag 'address', '', size: 75
# <input id="address" name="address" size="75" type="text" value="" />
最大文字数を指定
text_field_tag 'zip', nil, maxlength: 5
# <input id="zip" maxlength="5" name="zip" type="text" />
無効化
text_field_tag 'payment_amount', '$0.00', disabled: true
# <input disabled="disabled" id="payment_amount" name="payment_amount" type="text" value="$0.00" />
オプションとHTML属性を指定
text_field_tag 'ip', '0.0.0.0', maxlength: 15, size: 20, class: "ip-input"
# <input class="ip-input" id="ip" maxlength="15" name="ip" size="20" type="text" value="0.0.0.0" />
ソースコード
ファイル選択ボックスを生成
layout: page
説明
ファイル選択ボックスを生成
使い方
file_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.file_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:accept | フォームで受付可能なMIMEタイプ |
:multiple | 複数選択可能 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
:value | 初期値 |
例
file_field
ファイル選択ボックスを生成
file_field :page, :fine_name
# <input id="page_fine_name" name="page[fine_name]" size="30" type="file" />
class属性を指定
file_field :page, :fine_name, :class = 'page_fine_name'
# <input class="page_fine_name" id="page_fine_name" name="page[fine_name]" size="30" type="file" />
f.file_field
ファイル選択ボックスを生成
f.file_field :fine_name
# <input id="page_fine_name" name="page[fine_name]" size="30" type="file" />
class属性を指定
f.file_field :fine_name, :class = 'page_fine_name'
# <input class="page_fine_name" id="page_fine_name" name="page[fine_name]" size="30" type="file" />
ソースコード
汎用的なファイル選択ボックスを生成
layout: page
説明
モデルと関連のないファイル選択ボックスを生成
使い方
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" />
ソースコード
選択ボックスを生成
layout: page
説明
選択ボックスを生成
使い方
select(オブジェクト名, メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])
f.object
f.select(メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 | デフォルト値 |
---|---|---|
:multiple | 複数選択を有効にするか | |
:disabled | 無効化 | false |
:include_blank | 先頭に空の要素を追加するか | |
:prompt | 選択されていない時に表示される文字 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
select
選択ボックスを生成
select("post", "person_id", Person.all.collect { |p| [ p.name, p.id ] }, { include_blank: true })
# <select name="post[person_id]" id="post_person_id">
# <option value=""></option>
# <option value="1" selected="selected">David</option>
# <option value="2">Eileen</option>
# <option value="3">Rafael</option>
# </select>
f.select
選択ボックスを生成
f.select :person_id, Person.all.collect { |p| [ p.name, p.id ] }, include_blank: true
ソースコード
配列・ハッシュから選択肢を生成
layout: page
説明
配列・ハッシュから選択肢を生成
使い方
options_for_select(要素の配列 or ハッシュ [, 選択された要素])
例
タグの情報を配列で指定
select_tag 'page[name]', options_for_select([["Railsの基礎", "rails_base"], ["Rubyの基礎", "ruby_base"]])
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
タグの情報をハッシュで指定
select_tag 'page[name]', options_for_select({Railsの基礎: "rails_base", Rubyの基礎: "ruby_base"})
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
選択されたオプション
select_tag 'page[name]', options_for_select({Railsの基礎: "rails_base", Rubyの基礎: "ruby_base"}, selected: "ruby_base")
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
選択された要素あり
options_for_select([['Japanese', 'JPN']], 'JPN')
ソースコード
配列・ハッシュから作成した選択肢をグループ化
layout: page
説明
配列・ハッシュから作成した選択肢をグループ化
使い方
grouped_options_for_select(タグの配列 or ハッシュ [, オプション, 選択オプションの先頭に表示される文字列])
オプション
オプション | 説明 |
---|---|
:prompt | 指定したオプションを先頭に追加 |
:divider | グループの仕切り |
例
タグの情報を配列で指定
select_tag 'page[name]', grouped_options_for_select([["基礎", [["Railsの基礎", "rails_base"], ["Rubyの基礎", "ruby_base"]]]])
# <select id="page_name" name="page[name]"><optgroup label="基礎"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></optgroup></select>
タグの情報をハッシュで指定
select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]})
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
選択されたオプション
select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]}, "rails_base")
# <select id="page_name" name="page[name]"><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
選択オプションの先頭に表示される文字列
select_tag 'page[name]', grouped_options_for_select({基礎: [["Railsの基礎" ,"rails_base"], ["Rubyの基礎", "ruby_base"]]}, "", "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option><option value="rails_base">Railsの基礎</option>
# <option value="ruby_base">Rubyの基礎</option></select>
ソースコード
グループ分けされた選択肢を生成
layout: page
説明
グループ分けされた選択ボックスを生成
使い方
option_groups_from_collection_for_select(要素の配列 or ハッシュ, グループメソッド, グループのラベル属性の項目, value属性の項目, textの項目 [, 選択された要素])
例
グループ分けされた選択ボックスを生成
option_groups_from_collection_for_select(@continents, :countries, :name, :id, :name, 3)
ソースコード
選択ボックスを生成
layout: page
説明
選択ボックスを生成
使い方
options_from_collection_for_select(要素の配列, value属性の項目, textの項目 [, 選択された要素])
例
選択ボックスを生成
options_from_collection_for_select @categories, :id, :name
選択された要素あり
options_from_collection_for_select @categories, :id, :name, 2
ソースコード
選択ボックスをモデルの情報を元に生成
layout: page
説明
選択ボックスをモデルの情報を元に生成
使い方
collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
f.object
f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:include_blank | 空のオプションを先頭に追加 |
:disabled | 無効化 |
:selected | 選択されたオプション |
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
collection_select
基本形(オプションなし)
collection_select(:page, :name, @categories, :id, :name)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
collection_select(:page, :name, @categories, :id, :name, nil, prompt: "選択してください")
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
collection_select(:page, :name, @categories, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
選択されたオプション
collection_select(:page, :name, @categories, :id, :name, selected: 2)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2" selected="selected">Rubyの基礎知識</option>
# </select>
f.collection_select
基本形(オプションなし)
f.collection_select(:name, @categories, :id, :name)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
f.collection_select(:name, @categories, :id, :name, nil, prompt: "選択してください")
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
空のオプションを先頭に追加
f.collection_select(:name, @categories, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2">Rubyの基礎知識</option>
# </select>
選択されたオプション
f.collection_select(:name, @categories, :id, :name, selected: 2)
# <select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
# <option value="2" selected="selected">Rubyの基礎知識</option>
# </select>
ソースコード
選択ボックスをグループ化
layout: page
説明
選択ボックスをグループ化
使い方
grouped_collection_select(オブジェクト名, メソッド名, オブジェクトの配列, タグを取得するメソッド, タグのラベル, valueの項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
f.object
f.grouped_collection_select(メソッド名, オブジェクトの配列, タグを取得するメソッド, タグのラベル, valueの項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
:object | 選択タグに使用されるクラスのインスタンス |
:method | 選択タグに対応する属性 |
:collection | タグを表すオブジェクトの配列 |
:group_method | グループ名 |
:group_label_method | グループ属性 |
:option_key_method | collectionと使用される値 |
:option_value_method | optionタグのコンテンツとして使用される値 |
HTML属性
HTML属性 | 説明 |
---|---|
:name | 名称 |
:size | サイズ。ピクセル数で指定 |
:readonly | 内容変更を禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | 移動するショートカットキー |
:usemap | この画像に対応させるイメージマップ |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
grouped_collection_select
選択ボックスをグループ化
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
空のオプションを先頭に追加
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value=""></option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
指定したオプションを先頭に追加
# @categories = Category.all
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name, :prompt = "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
選択したオプション
# @categories = Category.all
# @page.name = 2
grouped_collection_select(:page, :name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2" selected="selected">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
f.grouped_collection_select
選択ボックスをグループ化
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
空のオプションを先頭に追加
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name, include_blank: true)
# <select id="page_name" name="page[name]"><option value=""></option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
指定したオプションを先頭に追加
# @categories = Category.all
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name, :prompt = "選択してください")
# <select id="page_name" name="page[name]"><option value="">選択してください</option>
# <optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
選択したオプション
# @categories = Category.all
# @page.name = 2
f.grouped_collection_select(:name, @categories, :pages, :name, :id, :name)
# <select id="page_name" name="page[name]"><optgroup label="Railsの基礎知識"><option value="1">Ruby on Railsとは</option>
# <option value="2" selected="selected">規約</option>
# <option value="3">ディレクトリ構造</option>
# <option value="4">アプリケーション作成の流れ</option>
# </optgroup><optgroup label="Rubyの基礎知識"><option value="5">Rubyとは</option></optgroup></select>
ソースコード
メールアドレス入力ボックスを生成
layout: page
説明
メールアドレス入力ボックスを生成
使い方
email_field(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])
f.object
f.email_field(メソッド名 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
email_field
メールアドレス入力ボックスを生成
email_field :page, :email
# <input id="page_email" name="page[email]" size="30" type="email" />
初期値指定
# @page.email = "test@example.com"
email_field :page, :email
# <input id="page_email" name="page[email]" size="30" type="email" value="test@example.com"/>
sizeの指定
email_field :page, :email
# <input id="page_email" name="page[email]" size="40" type="email"/>
f.email_field
メールアドレス入力ボックスを生成
f.email_field :email
# <input id="page_email" name="page[email]" size="30" type="email" />
初期値指定
# @page.email = "test@example.com"
f.email_field :email
# <input id="page_email" name="page[email]" size="30" type="email" value="test@example.com"/>
sizeの指定
f.email_field :email, size: "40"
# <input id="page_email" name="page[email]" size="40" type="email"/>
ソースコード
汎用的なメールアドレス入力ボックスを生成
layout: page
説明
モデルと関連のないメールアドレス入力ボックスを生成
使い方
email_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
メールアドレス入力ボックスを生成
email_field_tag 'name'
# <input id="name" name="name" type="email" />
初期値
email_field_tag 'email', 'email@example.com'
# <input id="email" name="email" type="email" value="email@example.com" />
classを付与
email_field_tag 'email', nil, class: 'special_input'
# <input class="special_input" id="email" name="email" type="email" />
無効化
email_field_tag 'email', 'email@example.com', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="email" name="email" type="email" value="email@example.com" />
ソースコード
数値入力ボックスを生成
layout: page
説明
数値入力ボックスを生成
使い方
number_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.number_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:in | 最少値から最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
number_field
数値入力ボックスを生成
number_field :product, :price
f.number_field
数値入力ボックスを生成
f.number_field :confirmed
ソースコード
汎用的な数値入力ボックスを生成
layout: page
説明
モデルと関連のない数値入力ボックスを生成
使い方
number_field_tag(要素名 [, value値, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:in | 最少値から最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
数値入力ボックスを生成
number_field_tag 'quantity'
# <input id="quantity" name="quantity" type="number" />
値を指定
number_field_tag 'quantity', '1'
# <input id="quantity" name="quantity" type="number" value="1" />
class属性を付与
number_field_tag 'quantity', nil, class: 'special_input'
# <input class="special_input" id="quantity" name="quantity" type="number" />
最小値を指定
number_field_tag 'quantity', nil, min: 1
# <input id="quantity" name="quantity" min="1" type="number" />
最大値を指定
number_field_tag 'quantity', nil, max: 9
# <input id="quantity" name="quantity" max="9" type="number" />
ソースコード
範囲選択バーを生成
layout: page
説明
範囲選択バーを生成
使い方
range_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.range_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
range_field
範囲選択バーを生成
range_field(:product, :discount, in: 1..100)
f.range_field
範囲選択バーを生成
f.range_field(:discount, in: 1..100)
ソースコード
汎用的な範囲選択バーを生成
layout: page
説明
モデルと関連のない範囲選択バーを生成
使い方
range_field_tag(要素名 [, 値, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:in | 最少値から最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
範囲選択バーを生成
range_field_tag :volume
ソースコード
検索ボックスを生成
layout: page
説明
検索ボックスを生成
使い方
search_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.search_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:autosave | オートセーブ |
:results | 表示される最大数 |
:onsearch | インクリメンタルサーチ |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
search_field
検索ボックスを生成
search_field(:user, :name)
# <input id="user_name" name="user[name]" type="search" />
表示される最大数を3
search_field(:user, :name, results: 3)
# <input id="user_name" name="user[name]" results="3" type="search" />
オートセーブ
search_field(:user, :name, autosave: true)
# <input autosave="com.example.www" id="user_name" name="user[name]" results="10" type="search" />
インクリメンタルサーチ
search_field(:user, :name, onsearch: true)
# <input id="user_name" incremental="true" name="user[name]" onsearch="true" type="search" />
f.search_field
検索ボックスを生成
f.search_field :name
ソースコード
汎用的な検索ボックスを生成
layout: page
説明
モデルと関連のない検索ボックスを生成
使い方
search_field_tag(要素名 [, value値, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
検索ボックスを生成
search_field_tag 'name'
# <input id="name" name="name" type="search" />
value値を設定
search_field_tag 'search', 'Enter your search query here'
# <input id="search" name="search" type="search" value="Enter your search query here" />
class属性を付与
search_field_tag 'search', nil, class: 'special_input'
# <input class="special_input" id="search" name="search" type="search" />
無効化
search_field_tag 'search', 'Enter your search query here', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="search" name="search" type="search" value="Enter your search query here" />
ソースコード
電話番号入力ボックスを生成
layout: page
説明
電話番号入力ボックスを生成
使い方
telephone_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.telephone_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
telephone_field
電話番号入力ボックスを生成
telephone_field("user", "phone")
# <input id="user_phone" name="user[phone]" type="tel" />
f.telephone_field
電話番号入力ボックスを生成
f.telephone_field("phone")
ソースコード
汎用的な電話番号入力ボックスを生成
layout: page
説明
モデルと関連のない電話番号入力ボックスを生成
使い方
telephone_field_tag(要素名 [, value値, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
電話番号入力ボックスを生成
telephone_field_tag 'name'
# <input id="name" name="name" type="tel" />
value値を設定
telephone_field_tag 'tel', '0123456789'
# <input id="tel" name="tel" type="tel" value="0123456789" />
value値が無い
telephone_field_tag 'tel', nil, class: 'special_input'
# <input class="special_input" id="tel" name="tel" type="tel" />
無効化
telephone_field_tag 'tel', '0123456789', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="tel" name="tel" type="tel" value="0123456789" />
ソースコード
URL入力ボックスを生成
layout: page
説明
URL入力ボックスを生成
使い方
url_field(オブジェクト名, メソッド名 [, オプション])
f.object
f.url_field(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
url_field
URL入力ボックスを生成
url_field("user", "homepage")
# <input id="user_homepage" name="user[homepage]" type="url" />
f.url_field
URL入力ボックスを生成
f.url_field("user", "homepage")
# <input id="user_homepage" name="user[homepage]" type="url" />
ソースコード
汎用的なURL入力ボックスを生成
layout: page
説明
モデルと関連のないURL入力ボックスを生成
使い方
url_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
URL入力ボックスを生成
url_field_tag 'name'
# <input id="name" name="name" type="url" />
value値を指定
url_field_tag 'url', 'http://rubyonrails.org'
# <input id="url" name="url" type="url" value="http://rubyonrails.org" />
class属性を指定
url_field_tag 'url', nil, class: 'special_input'
# <input class="special_input" id="url" name="url" type="url" />
無効化
url_field_tag 'url', 'http://rubyonrails.org', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="url" name="url" type="url" value="http://rubyonrails.org" />
ソースコード
サブミットボタンを生成
layout: page
説明
サブミットボタンを生成
使い方
f.submit([ボタンの名前 , オプション])
オプション
オプション | 説明 |
---|---|
:confirm | 確認ダイアログに表示する文字列 |
:disabled | 無効化 |
:disable_with | 無効化したときに表示する文字列 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
サブミットボタンを生成
f.submit
class属性を付与
f.submit :button, class: "btn"
ソースコード
汎用的なサブミットボタンを生成
layout: page
説明
サブミットボタンを生成
使い方
submit_tag([ボタンの名前 , オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:data | Data要素のカスタマイズ |
:disabled | 無効化 |
HTML属性
HTML属性 | 説明 |
---|---|
:confirm | 確認ダイアログに表示する文字列 |
:disable_with | ボタンを無効化したときに表示する文字列 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
サブミットボタンを生成
submit_tag
# <input name="commit" data-disable-with="Save changes" type="submit" value="Save changes" />
value値を設定
submit_tag "Edit this article"
# <input name="commit" data-disable-with="Edit this article" type="submit" value="Edit this article" />
無効化
submit_tag "Save edits", disabled: true
# <input disabled="disabled" name="commit" data-disable-with="Save edits" type="submit" value="Save edits" />
data属性を設定
submit_tag "Complete sale", data: { disable_with: "Submitting..." }
# <input name="commit" data-disable-with="Submitting..." type="submit" value="Complete sale" />
value値が無い
submit_tag nil, class: "form_submit"
# <input class="form_submit" name="commit" type="submit" />
class属性を設定
submit_tag "Edit", class: "edit_button"
# <input class="edit_button" data-disable-with="Edit" name="commit" type="submit" value="Edit" />
確認ダイアログ
submit_tag "Save", data: { confirm: "Are you sure?" }
# <input name='commit' type='submit' value='Save' data-disable-with="Save" data-confirm="Are you sure?" />
ソースコード
日時選択ボックスを生成
layout: page
説明
日時の入力に特化した選択ボックスを生成
使い方
datetime_select(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])
f.object
f.datetime_select(メソッド名 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:use_month_numbers | 月を数字で表示 |
:use_two_digit_numbers | 月と日を2桁表示 |
:use_short_month | 月名を省略形で表示 |
:add_month_numbers | 数値 + 月名表示 |
:use_month_names | 月名をカスタマイズ |
:date_separator | 年月日の区切り文字 |
:start_year | 開始年 |
:end_year | 終了年 |
:minute_step | 分の間隔を変更 |
:discard_day | 日の選択ボックスを非表示 |
:discard_month | 月の選択ボックスを非表示 |
:discard_year | 年の選択ボックスを非表示 |
:order | 並び順を指定 |
:include_blank | 空を含めて表示 |
:default | デフォルトの日付を設定 |
:selected | 優先した設定 |
:disabled | 無効化 |
:prompt | 選択値の一番上を指定 |
:with_css_classes | スタイルを変更するタグの設定 |
:discard_type | 名前の型を破棄 |
:prefix | 名前の接頭辞を設定 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
datetime_select
日時の入力に特化した選択ボックスを生成
datetime_select :page, :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月を数字で表示
datetime_select :page, :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月名を省略形で表示
datetime_select :page, :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
数値 + 月名表示
datetime_select :page, :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
年の範囲を2011から2013で10分間隔
datetime_select :page, :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
省略
# </select>
f.datetime_select
日時の入力に特化した選択ボックスを生成
f.datetime_select :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月を数字で表示
f.datetime_select :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月名を省略形で表示
f.datetime_select :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
数値 + 月名表示
f.datetime_select :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
年の範囲を2011から2013で10分間隔
f.datetime_select :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
# <option selected="selected" value="2011">2011</option>
省略
# </select>
ソースコード
モデルを固定してフォームを生成
layout: page
説明
モデルを固定してフォームを生成
form_for内で異なるモデルを編集できるようになる
使い方
<%= fields_for(モデル) do |i| %>
<% end %>
例
pageモデルにcategoryモデルの情報を入力
<%= form_for(@page) do |i| %>
<%= fields_for @page.category do |category| %>
<%= category.text_field :name %>
<% end %>
<% end %>
ソースコード
フォームの要素をグループ化
layout: page
説明
モデルを固定してフォームを生成
form_for内で異なるモデルを編集できるようになる
使い方
field_set_tag(サブフォームのタイトル [, HTML属性 or イベント属性]) do
end
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
サブフォームがCategory
<%= field_set_tag 'Category' do %>
<%= text_field_tag 'name' %>
<% end %>
# <fieldset><legend>Category</legend><input id="name" name="name" type="text" /></fieldset>
class付与
field_set_tag 'Compliance', class: 'rights' do
end
ソースコード
ボタンを生成
layout: page
説明
モデルと関連のないボタンを生成
使い方
button(文字列 [, オプション or データ属性 or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:data | Data要素のカスタマイズ |
:disabled | 無効化 |
データ属性
オプション | 説明 |
---|---|
:confirm | 確認ダイアログに表示する文字列 |
:disable_with | 送信時にクリック禁止 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
例
ボタンを生成
button("作成")
# <button name='button' type='submit'>作成</button>
ブロックでボタンを生成
button do
content_tag(:strong, 'Ask me!')
end
# <button name='button' type='submit'>
# <strong>Ask me!</strong>
# </button>
ソースコード
汎用的なボタンを生成
layout: page
説明
モデルと関連のないボタンを生成
使い方
button_tag([オプション or データ属性 or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:data | Data要素のカスタマイズ |
:disabled | 無効化 |
データ属性
オプション | 説明 |
---|---|
:confirm | 確認ダイアログに表示する文字列 |
:disable_with | 送信時にクリック禁止 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
例
ボタンを生成
button_tag
# <button name="button" type="submit">Button</button>
リセットボタンを生成
button_tag 'Reset', type: 'reset'
# <button name="button" type="reset">Reset</button>
ボタンにstringダグを含める
button_tag(type: 'button') do
content_tag(:strong, 'Ask me!')
end
# <button name="button" type="button">
# <strong>Ask me!</strong>
# </button>
データ属性を指定
button_tag "Checkout", data: { disable_with: "Please wait..." }
# <button data-disable-with="Please wait..." name="button" type="submit">Checkout</button>
ソースコード
画像サブミットボタンを生成
layout: page
説明
画像サブミットボタンを生成
使い方
image_submit_tag(値 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:data | Data要素のカスタマイズ |
:disabled | 無効化 |
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
画像サブミットボタンを生成
image_submit_tag("login.png")
# <input alt="Login" src="/images/login.png" type="image" />
class属性を付与
image_submit_tag("search.png", class: 'search_button', alt: 'Find')
# <input alt="Find" class="search_button" src="/images/search.png" type="image" />
無効化
image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
# <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/images/agree.png" type="image" />
data要素
image_submit_tag("save.png", data: { confirm: "Are you sure?" })
# <input alt="Save" src="/images/save.png" data-confirm="Are you sure?" type="image" />
ソースコード
色の入力欄を生成
layout: page
説明
色の入力欄を生成
使い方
color_field(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])
f.object
f.color_field(メソッド名 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
color_field
色の入力欄を生成
color_field "car", "color"
# <input id="car_color" name="car[color]" type="color" value="#000000" />
カラーコード指定
color_field "car", "color", "#DEF726"
# <input id="car_color" name="color" type="color" value="#DEF726" />
プション指定
color_field "car", "color", nil, class: 'special_input'
# <input class="special_input" id="car_color" name="color" type="color" />
フォームの項目の利用禁止
color_fiel "car", "color", "DEF726", class: "special_input", disabled: true
# <input disabled="disabled" class="special_input" id="car_color" name="color" type="color" value="#DEF726" />
f.color_field
色の入力欄を生成
f.color_field "car", "color"
# <input id="car_color" name="car[color]" type="color" value="#000000" />
カラーコードを指定
f.color_field "car", "color", "#DEF726"
# <input id="car_color" name="color" type="color" value="#DEF726" />
HTML属性を指定
f.color_field "car", "color", nil, class: 'special_input'
# <input class="special_input" id="car_color" name="color" type="color" />
フォームの項目の利用禁止
f.color_fiel "car", "color", "DEF726", class: "special_input", disabled: true
# <input disabled="disabled" class="special_input" id="car_color" name="color" type="color" value="#DEF726" />
ソースコード
汎用的な色の入力欄を生成
layout: page
説明
モデルと関連のない色の入力欄を生成
使い方
color_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
色の入力欄を生成
color_field_tag 'name'
# <input id="name" name="name" type="color" />
カラーコード指定
color_field_tag 'color', '#DEF726'
# <input id="color" name="color" type="color" value="#DEF726" />
プション指定
color_field_tag 'color', nil, class: 'special_input'
# <input class="special_input" id="color" name="color" type="color" />
フォームの項目の利用禁止
color_field_tag 'color', '#DEF726', class: 'special_input', disabled: true
# <input disabled="disabled" class="special_input" id="color" name="color" type="color" value="#DEF726" />
ソースコード
日付の入力欄を生成
layout: page
説明
日付の入力欄を生成
使い方
date_field(要素名 [, 値, オプション])
f.object
f.date_field(要素名 [, 値, オプション])
オプション
オプション | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
date_field
日付の入力欄を生成
date_field "user", "born_on"
# <input id="user_born_on" name="user[born_on]" type="date" />
f.date_field
日付の入力欄を生成
f.date_field "user", "born_on"
# <input id="user_born_on" name="user[born_on]" type="date" />
ソースコード
汎用的な日付の入力欄を生成
layout: page
説明
モデルと関連のない日付の入力欄を生成
使い方
date_field_tag(要素名 [, value値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
日付の入力欄を生成
date_field_tag 'name'
# <input id="name" name="name" type="date" />
初期値を指定
date_field_tag 'date', '01/01/2014'
# <input id="date" name="date" type="date" value="01/01/2014" />
classを付与
date_field_tag 'date', nil, class: 'special_input'
# <input class="special_input" id="date" name="date" type="date" />
ソースコード
日時の入力欄を生成
layout: page
説明
日時の入力欄を生成
使い方
datetime_field(要素名 [, value値, オプション or HTML属性 or イベント属性])
f.object
f.datetime_field(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
datetime_field
日時の入力欄を生成
datetime_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
datetime_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
datetime_field("user", "born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
datetime_field("user", "born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
f.datetime_field
日時の入力欄を生成
f.datetime_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
f.datetime_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
f.datetime_field("born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
f.datetime_field("born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ソースコード
汎用的な日時の入力欄を生成
layout: page
説明
モデルと関連のない日時の入力欄を生成
使い方
datetime_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
日時の入力欄を生成
datetime_field_tag :published
# <input type="datetime-local" name="published" id="published">
ソースコード
ローカル日時の入力欄を生成
layout: page
説明
ローカル日時の入力欄を生成
datetime_fieldの別名
使い方
datetime_local_field(要素名 [, 値, オプション])
f.object
f.datetime_local_field(要素名 [, 値, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
datetime_local_field
日時の入力欄を生成
datetime_local_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
datetime_local_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
datetime_local_field("user", "born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
datetime_local_field("user", "born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
f.datetime_local_field
日時の入力欄を生成
f.datetime_local_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" />
日付指定
@user.born_on = Date.new(1984, 1, 12)
f.datetime_local_field("born_on")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" value="1984-01-12T00:00:00" />
時間指定
f.datetime_local_field("born_on", min: Date.today)
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ISO8601形式の日時を指定
f.datetime_local_field("born_on", min: "2014-05-20T00:00:00")
# <input id="user_born_on" name="user[born_on]" type="datetime-local" min="2014-05-20T00:00:00.000" />
ソースコード
汎用的なローカル日時の入力欄を生成
layout: page
説明
モデルと関連のないローカル日時の入力欄を生成
datetime_field_tagの別名
使い方
datetime_local_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:disabled | 無効化 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
ローカル日時の入力欄を生成
datetime_local_field_tag :published
# <input type="datetime-local" name="published" id="published">
ソースコード
月の入力欄を生成
layout: page
説明
月の入力欄を生成
使い方
month_field(要素名 [, 値, オプション or HTML属性 or イベント属性])
f.object
f.month_field(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
month_field
月の入力欄を生成
month_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="month" />
f.month_field
月の入力欄を生成
f.month_field("user", "born_on")
# <input id="user_born_on" name="user[born_on]" type="month" />
ソースコード
汎用的な月の入力欄を生成
layout: page
説明
モデルと関連のない月の入力欄を生成
使い方
month_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
月のテキストフィールドを生成
month_field_tag :published_month
最小値を設定
month_field_tag(:published_month, :min => DateTime.new(2020, 1, 1)
ソースコード
時間の入力欄を生成
layout: page
説明
時間の入力欄を生成
使い方
time_field(要素名 [, 値, オプション])
f.object
f.time_field(要素名 [, 値, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
time_field
時間の入力欄を生成
time_field("task", "started_at")
# <input id="task_started_at" name="task[started_at]" type="time" />
最小値を指定
time_field("task", "started_at", min: Time.now)
# <input id="task_started_at" name="task[started_at]" type="time" min="01:00:00.000" />
f.time_field
時間の入力欄を生成
f.time_field :started_at
# <input id="task_started_at" name="task[started_at]" type="time" />
ソースコード
汎用的な時間の入力欄を生成
layout: page
説明
モデルと関連のない時間の入力欄を生成
使い方
time_field_tag(要素名 [, 値, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
HTML属性
HTML属性 | 説明 |
---|---|
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onselect | 入力欄のテキストが選択された時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
時間の入力欄を生成
time_field_tag :name
ソースコード
週の入力欄を生成
layout: page
説明
週の入力欄を生成
使い方
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" />
ソースコード
モデルと関連のない週の入力欄を生成
layout: page
説明
モデルと関連のない週の入力欄を生成
使い方
week_field_tag(要素名 [, 値, オプション])
オプション
オプション | 説明 |
---|---|
:min | 最少値 |
:max | 最大値 |
:step | 許容値の粒度 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:placeholder | フォーカスが当たるまで表示される文字列 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
週の入力欄を生成
week_field_tag :wk
ソースコード
日付選択ボックスを生成
layout: page
説明
モデルと関連のない日付の入力に特化した選択ボックスを生成
使い方
date_select(オブジェクト名, メソッド名 [, オプション or HTML属性 or イベント属性])
f.object
f.date_select(メソッド名 [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 |
---|---|
:use_month_numbers | 月を数字で表示 |
:use_two_digit_numbers | 月と日を2桁表示 |
:use_short_month | 月名を省略形で表示 |
:add_month_numbers | 数値 + 月名表示 |
:use_month_names | 月名をカスタマイズ |
:month_format_string | フォーマット |
:date_separator | 年月日の区切り文字 |
:time_separator | 時間の区切り文字 |
:start_year | 開始年 |
:end_year | 終了年 |
:year_format | 年選択の年の形式を設定 |
:discard_day | 日の選択ボックスを非表示 |
:discard_month | 月の選択ボックスを非表示 |
:discard_year | 年の選択ボックスを非表示 |
:order | 並び順を指定 |
:include_blank | 空を含めて表示 |
:default | デフォルトの日付を設定 |
:selected | 優先した設定 |
:disabled | 無効化 |
:prompt | 選択値の一番上を指定 |
:with_css_classes | スタイルを変更するタグの設定 |
:use_hidden | 非表示のタグのみ生成 |
HTML属性
HTML属性 | 説明 |
---|---|
:discard_type | 名前の型を破棄 |
:prefix | 名前の接頭辞を設定 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
datetime_select_tag
日付の入力に特化した選択ボックスを生成
datetime_select_tag :page, :updated_at
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月を数字で表示
datetime_select_tag :page, :updated_at, use_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
月名を省略形で表示
datetime_select_tag :page, :updated_at, use_short_month: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
数値 + 月名表示
datetime_select_tag :page, :updated_at, add_month_numbers: true
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2006">2006</option>
省略
# </select>
年の範囲を2011から2013で10分間隔
datetime_select_tag :page, :updated_at, start_year: 2012, end_year: 2013, minute_step: 10
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <select id="page_updated_at_1i" name="page[updated_at(1i)]">
# <option value="2010">2010</option>
省略
# </select>
f.date_select
日付の入力に特化した選択ボックスを生成
<%= form_for @person do |f| %>
<%= f.date_select :birth_date %>
<%= f.submit %>
<% end %>
ソースコード
時間選択ボックスを生成
layout: page
説明
時間の入力に特化した選択ボックスを生成
使い方
time_select(オブジェクト名 メソッド名 [, オプション or HTML属性 or イベント属性])
f.object
f.time_select(メソッド名 [, オプション])
オプション
オプション | 説明 |
---|---|
:include_seconds | 秒数選択ボックス |
:ampm | AM/PM形式 |
:ignore_date | 未入力の場合に送信されない |
:order | 並び順を指定 |
:include_blank | 空を含めて表示 |
:include_seconds | 秒数選択ボックスを表示 |
:default | デフォルトの日付を設定 |
:disabled | 無効化 |
:prompt | 選択値の一番上を指定 |
:time_separator | 時刻の区切り文字 |
:discard_type | 名前の型を破棄 |
:prefix | 名前の接頭辞を設定 |
:size | フィールドの高さ |
:multiple | 複数選択可能 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
time_select
時間の入力に特化した選択ボックスを生成
time_select("article", "sunrise")
秒数選択ボックスを表示
time_select("article", "start_time", include_seconds: true)
00, 15, 30, and 45を取得
time_select 'game', 'game_time', {minute_step: 15}
AM/PM形式
time_select 'game', 'game_time', {ampm: true}
f.time_select
時間の入力に特化した選択ボックスを生成
f.time_select :average_lap
選択ボックスを生成
layout: page
説明
選択ボックスを生成
使い方
select_tag(オブジェクト名, メソッド名, 要素(配列 or ハッシュ) [, オプション or HTML属性 or イベント属性])
オプション
オプション | 説明 | デフォルト値 |
---|---|---|
:multiple | 複数選択を有効にするか | |
:disabled | 無効化 | false |
:include_blank | 先頭に空の要素を追加するか | |
:prompt | 指定したオプションを先頭に追加 |
HTML属性
HTML属性 | 説明 |
---|---|
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
イベント属性
イベント属性 | 説明 |
---|---|
:onclick | クリックされた時 |
:ondblclick | ダブルクリックされた時 |
:onmousedown | マウスのボタンが押し下げられた時 |
:onmouseup | マウスのボタンが離された時 |
:onmouseover | カーソルが重なった時 |
:onmousemove | カーソルが移動した時 |
:onmouseout | カーソルが離れた時 |
:onkeypress | キーが押されて離された時 |
:onkeydown | キーが押し下げられた時 |
:onkeyup | キーが離された時 |
:onfocus | フォーカスされた時 |
:onblur | フォーカスを失った時 |
:onchange | フォーカスを失う際に値が変化していた時 |
例
選択ボックスを生成
select_tag "people", options_from_collection_for_select(@people, "id", "name")
# <select id="people" name="people"><option value="1">David</option></select>
選択済みオプションあり
select_tag "people", options_from_collection_for_select(@people, "id", "name", "1")
# <select id="people" name="people"><option value="1" selected="selected">David</option></select>
rawで直接指定
select_tag "people", raw("<option>David</option>")
# <select id="people" name="people"><option>David</option></select>
複数選択を有効
select_tag "colors", raw("<option>Red</option><option>Green</option><option>Blue</option>"), multiple: true
# <select id="colors" multiple="multiple" name="colors[]"><option>Red</option>
# <option>Green</option><option>Blue</option></select>
class属性など指定
select_tag "access", raw("<option>Read</option><option>Write</option>"), multiple: true, class: 'form_input', id: 'unique_id'
# <select class="form_input" id="unique_id" multiple="multiple" name="access[]"><option>Read</option>
# <option>Write</option></select>
先頭に空の要素を追加
select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true
# <select id="people" name="people"><option value="" label=" "></option><option value="1">David</option></select>
先頭に指定した文字列を追加
select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: "All"
# <select id="people" name="people"><option value="">All</option><option value="1">David</option></select>
指定したオプションを先頭に追加
select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something"
# <select id="people" name="people"><option value="">Select something</option><option value="1">David</option></select>
無効化
select_tag "destination", raw("<option>NYC</option><option>Paris</option><option>Rome</option>"), disabled: true
# <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
# <option>Paris</option><option>Rome</option></select>
ソースコード
モデルからラジオボタンを自動生成
layout: page
説明
モデルからラジオボタンを自動生成
使い方
collection_radio_buttons(オブジェクト名, コレクション名, メソッド名, value値 [, オプション])
f.object
f.collection_radio_buttons(メソッド名, コレクション名, value値 [, オプション])
オプション
オプション | 説明 |
---|---|
:checked | チェックの有無 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
collection_radio_buttons
モデルからラジオボタンを自動生成
collection_radio_buttons(:post, :author_id, Author.all, :id, :name_with_initial)
ブロックで指定
collection_radio_buttons(:post, :author_id, Author.all, :id, :name_with_initial) do |b|
b.label { b.radio_button }
end
f.collection_radio_buttons
モデルからラジオボタンを自動生成
form_for @post do |f|
f.collection_radio_buttons :author_id, Author.all, :id, :name_with_initial
f.submit
end
ソースコード
モデルからチェックボックスを自動生成
layout: page
説明
モデルからチェックボックスを自動生成
使い方
collection_check_boxes(オブジェクト名, メソッド名, コレクション名 [, オプション, checked_value = "1", unchecked_value = "0"])
f.object
f.collection_check_boxes(メソッド名, コレクション名 [, オプション, checked_value = "1", unchecked_value = "0"])
オプション
オプション | 説明 |
---|---|
:checked | チェックボックスのチェックの有無 |
:size | フォームの幅 |
:maxlength | 入力フィールドに入力可能な最大文字数 |
:accept | フォームで受付可能なMIMEタイプ |
:readonly | フォームの内容変更禁止 |
:disabled | 無効化 |
:tabindex | Tabキーによる入力欄の移動順 |
:accesskey | フォームに移動するショートカットキー |
:id | 要素固有の識別子 |
:class | 要素を分類するクラス名 |
:title | 要素の補足情報 |
:style | 要素の補足情報 |
:dir | 表記方向 |
:lang | 基本言語 |
例
collection_check_boxes
モデルからチェックボックスを自動生成
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial)
ブロックで指定
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial) do |b|
b.label { b.check_box }
end
f.collection_check_boxes
モデルからチェックボックスを自動生成
<%= form_for @post do |f| %>
<%= f.collection_check_boxes :author_ids, Author.all, :id, :name_with_initial %>
<%= f.submit %>
<% end %>