bootstrap_form
は、Bootstrap v5 スタイルのフォームを Rails アプリケーションに非常に簡単に統合できるようにする Rails フォーム ビルダーです。 Rails フォーム ヘルパーを拡張するフォーム ヘルパーを提供します。 bootstrap_forms
のフォーム ヘルパーは、フォーム フィールドとそのラベル、および適切なブートストラップ表示に必要なすべてのブートストラップ マークアップを生成します。 bootstrap_form
以下も提供します。
bootstrap_form
の検証エラー処理をオフにして自分で行うこともできます。これは Rails で生成された検証メッセージに適用されることに注意してください。 HTML 5 のクライアント側検証とそのままの状態での Rails 検証は実際にはうまく連携しません。課題と解決策についての議論はここにありますrequired
属性の自動マークアップ。bootstrap_form
では実行できないことを行う必要がある場合に、Rails フォーム ヘルパーにエスケープする方法。 bootstrap_form
が行うその他の優れた機能は次のとおりです。
.erb
ファイル内のコードの量を削減します。 bootstrap_form
標準の Rails フォーム ヘルパーと同様に機能します。この README は、それらがどのように機能するかを理解していることを前提としています。ビュー ファイル内のbootstrap_form_with
、 bootstrap_form_for
、またはbootstrap_form_tag
のいずれかを使用してフォームを開始します。標準の Rails ヘルパーの代わりにbootstrap_form
ヘルパーを呼び出すフォーム ビルダーを取得します。ビュー ファイル内でそのフォーム ビルダーを使用して、1 つ以上のフォーム フィールドをレンダリングします。
bootstrap_form
少なくとも現在サポートされているバージョンの Ruby と Rails をサポートします。
Bootstrap 5 をインストールします。これを行うには、Rails アプリケーションで使用しているアセット パイプラインに応じて、さまざまな方法があります。 1 つの方法は、Sprockets で動作する gem を使用することです。これを行うには、 --webpacker
オプションを使用せずに作成された新しい Rails 7.0 以降のアプリケーションで、 bootstrap
gem をGemfile
に追加します。
gem "bootstrap" , "~> 5.0"
そして、公式ブートストラップ インストール ガイドの残りの手順に従って、 application.scss
とapplication.js
設定します。
bootstrap_form
gem をGemfile
に追加します。
gem "bootstrap_form" , "~> 5.4"
それから:
bundle install
使用している CSS プリプロセッサに応じて、ブートストラップ フォーム スタイルの追加は若干異なります。プリプロセッサを使用せずにデフォルト モードで Rails を使用する場合は、 application.css
ファイルに次の行を追加する必要があります。
* = require rails_bootstrap_forms
公式ブートストラップ インストール ガイドに従っている場合は、おそらく SCSS に切り替えているでしょう。この場合、次の行をapplication.scss
に追加します。
@import " rails_bootstrap_forms.css " ;
まず、Rails form_for
ヘルパーの代わりにbootstrap_form_for
ヘルパーを使用します。以下に例を示します。
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
これにより、次の HTML が生成されます。
< form accept-charset =" UTF-8 " action =" /users " class =" new_user " id =" new_user " method =" post " >
< div class =" mb-3 " >
< label class =" form-label required " for =" user_email " > Email </ label >
< input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
</ div >
< div class =" mb-3 " >
< label class =" form-label " for =" user_password " > Password </ label >
< input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
</ div >
< div class =" form-check mb-3 " >
< input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
< input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
< label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
</ div >
< input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >
フォームがモデルに裏付けられていない場合は、 bootstrap_form_tag
を使用します。このヘルパーの使用法は、モデル オブジェクトが最初の引数として渡されないことを除いて、 bootstrap_form_for
と同じです。以下に例を示します。
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
<%= f.email_field :email, value: '[email protected]' %>
<%= f.submit %>
<% end %>
これにより、以下が生成されます。
< form accept-charset =" UTF-8 " action =" /subscribe " method =" post " >
< div class =" mb-3 " >
< label class =" form-label " for =" email " > Email </ label >
< input class =" form-control " id =" email " name =" email " type =" email " value =" [email protected] " >
</ div >
< input class =" btn btn-secondary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >
まず、 form_with
の代わりにbootstrap_form_with
ヘルパーを使用します。以下に例を示します。
<%= bootstrap_form_with(model: @user, local: true) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password, help: 'A good password should be at least six characters long' %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
これにより、以下が生成されます。
< form accept-charset =" UTF-8 " action =" /users " method =" post " >
< div class =" mb-3 " >
< label class =" form-label required " for =" user_email " > Email </ label >
< input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
</ div >
< div class =" mb-3 " >
< label class =" form-label " for =" user_password " > Password </ label >
< input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
< small class =" form-text text-muted " > A good password should be at least six characters long </ small >
</ div >
< div class =" form-check mb-3 " >
< input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
< input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
< label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
</ div >
< input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >
bootstrap_form_with
form_with
のmodel:
とurl:
両方のユースケースをサポートします。
form_with
form_for
およびform_tag
と比較していくつかの重要な違いがあり、これらの違いはbootstrap_form_with
にも当てはまります。違いの詳しい概要は、https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a または Rails ドキュメントでご覧いただけます。
ネストせずに別のオブジェクトにフィールドを追加するには、Rails で行うのと同じ方法でbootstrap_fields_for
とbootstrap_fields
ヘルパーを使用します。
<%= bootstrap_form_with model: @user do |f| %>
<%= f.email_field :email %>
<%= bootstrap_fields_for :parent do |pf| %>
<%= pf.email_field :email, label: 'Parent email' %>
<% end %>
<%= bootstrap_fields @user.address do |af| %>
<%= af.text_field :street_name %>
<% end %>
<%= f.primary "Save" %>
<% end %>
生成されたHTML:
< form accept-charset =" UTF-8 " action =" /users " method =" post " >
< div class =" mb-3 " >
< label class =" form-label required " for =" user_email " > Email </ label >
< input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
</ div >
< div class =" mb-3 " >
< label class =" form-label " for =" parent_email " > Parent email </ label >
< input class =" form-control " id =" parent_email " name =" parent[email] " type =" email " >
</ div >
< div class =" mb-3 " >
< label class =" form-label " for =" street_name " > Street name </ label >
< input class =" form-control " id =" street_name " name =" street_name " type =" text " >
</ div >
< input class =" btn btn-primary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >
bootstrap_form
設定を行わずにすぐに使用できます。ただし、 bootstrap_form
は、アプリケーションで生成されるすべてのフォームに影響を与えるオプションを設定するためのオプションの構成ファイルがconfig/initializers/bootstrap_form.rb
にあります。
現在の構成オプションは次のとおりです。
オプション | デフォルト値 | 説明 |
---|---|---|
default_form_attributes | bootstrap_form バージョン 3 および 4 では、すべてのフォームに role="form" 属性が追加されました。 W3C バリデーターは、role="form" 属性を持つフォームに対して警告を生成します。 bootstrap_form バージョン 5 では、デフォルトでこの属性が削除されます。フォームを W3C に準拠しないようにするには、このオプションを{ role: "form" } に設定しますが、 bootstrap_form バージョン 3 および 4 と同様にrole="form" 属性を生成します。 |
例:
# config/initializers/bootstrap_form.rb
BootstrapForm . configure do | c |
c . default_form_attributes = { role : "form" } # to make forms non-compliant with W3C.
end
bootstrap_form
次の Rails フォーム ヘルパーの独自バージョンを提供します。
button email_field search_field
check_box file_field select
collection_check_boxes grouped_collection_select submit
collection_radio_buttons hidden_field (not wrapped, but supported) telephone_field
collection_select month_field text_area
color_field number_field text_field
date_field password_field time_field
date_select phone_field time_select
datetime_field radio_button time_zone_select
datetime_local_field range_field url_field
datetime_select rich_text_area week_field
デフォルトでは、ヘルパーは、Rails label
ヘルパーを呼び出してから、 bootstrap_form
ヘルパーと同じ名前の Rails ヘルパーを呼び出すことによって、 label
タグ、およびinput
、 select
、またはtextarea
タグを生成します。
bootstrap_form
ヘルパーは、標準の Rails フォーム ヘルパーと同じオプションを受け入れ、それらのオプションを Rails ヘルパーに渡します。次のセクションで説明する追加オプションも受け入れます。
ヘルパーの多くは同じオプションを受け入れます。例外は次のとおりです。
button、check_box、collection_check_boxes、collection_radio_buttons、collection_select、date_select、datetime_select、file_field、grouped_collection_select、hidden_field、radio_button、rich_text_area、select、submit、time_select、time_zone_select
例外リストにないフォーム ヘルパーのオプションについては、次のサブセクションで説明します。
フィールドのラベル テキストを指定する場合は、 label
オプションを使用します。
<%= f.password_field :password_confirmation, label: "Confirm Password" %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" form-label " for =" user_password_confirmation " > Confirm Password </ label >
< input class =" form-control " id =" user_password_confirmation " name =" user[password_confirmation] " type =" password " >
</ div >
ラベルを非表示にするには、 hide_label: true
オプションを使用します。これにより、 visually-hidden
クラスが追加され、スクリーン リーダーを使用しているユーザーがラベルにアクセスできるようになります。
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" visually-hidden " for =" user_comment " > Comment </ label >
< textarea class =" form-control " id =" user_comment " name =" user[comment] " placeholder =" Leave a comment... " >
</ textarea >
</ div >
カスタム クラスをフィールドのラベルに追加するには:
<%= f.email_field :email, label_class: "custom-class" %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" custom-class required " for =" user_email " > Email </ label >
< input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
</ div >
または、代わりにラベルを入力プレースホルダーとして追加することもできます (これにより、ラベルが自動的に非表示になります)。
<%= f.email_field :email, value: '', label_as_placeholder: true %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" visually-hidden required " for =" user_email " > Email </ label >
< input class =" form-control " id =" user_email " name =" user[email] " placeholder =" Email " required =" required " type =" email " value ="" >
</ div >
生成された入力タグのクラスを指定するには、 control_class
オプションを使用します。
<%= f.text_field :email, control_class: "custom-class" %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" form-label required " for =" user_email " > Email </ label >
< input class =" custom-class " id =" user_email " name =" user[email] " required =" required " type =" text " value =" [email protected] " >
</ div >
ヘルプ テキストを追加するには、 help
オプションを使用します。
<%= f.password_field :password, help: "Must be at least 6 characters long" %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" form-label " for =" user_password " > Password </ label >
< input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
< small class =" form-text text-muted " > Must be at least 6 characters long </ small >
</ div >
この gem は、ロケール翻訳ファイル (i18n) 内のヘルプ メッセージも認識します。
en :
activerecord :
help :
user :
password : " A good password should be at least six characters long "
HTML を含むヘルプ翻訳は、名前に_html
追加する規則に従う必要があります。
en :
activerecord :
help :
user :
password_html : " A <strong>good</strong> password should be at least six characters long "
モデル名に複数の単語が含まれている場合 ( SuperUser
など)、翻訳ファイルのキーには下線 ( super_user
) を付ける必要があります。
help
オプションを渡すことで特定のフィールドのヘルプ翻訳をオーバーライドしたり、 help: false
を渡して完全にオフにしたりすることができます。
入力フィールドにprepend
またはappend
オプションを渡すことができます。
<%= f.text_field :price, prepend: "$", append: ".00" %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" form-label " for =" user_price " > Price </ label >
< div class =" input-group " >
< span class =" input-group-text " > $ </ span >
< input class =" form-control " id =" user_price " name =" user[price] " type =" text " >
< span class =" input-group-text " > .00 </ span >
</ div >
</ div >
複数の項目を入力にアタッチする場合は、それらを配列として渡します。
<% icon = capture do %> < i class =" bi bi-currency-dollar " > </ i > <% end %>
<%= f . text_field :price , prepend : [ 'Net' , icon ] , append : [ '.00' , 'per day' ] %>
これにより、以下が生成されます。
< div class =" mb-3 " >
< label class =" form-label " for =" user_price " > Price </ label >
< div class ="