Railsでサイトを作るときにBootstrapを使うことが多いと思います。この記事ではその中でもウェブフォームに特化してサイトを作るのを楽にする情報をまとめて行きます。
DatePicker
日付の選択には名前そのままのbootstrap-datepicker-railsがあります。
このgemは以下のプラグインをrailsとインテグレーションしたものです。
TimePicker
日付の選択のように時間を選択するにはbootstrap-timepicker-railsがあります。
このgemは以下のプラグインをrailsとインテグレーションしたものです。
ColorPicker
色の選択にはbootstrap-colorpicker-railsがあります。
このgemは以下のプラグインをrailsとインテグレーションしたものです。
Form Builder
幾つか良く使われているFormBuilderがあるので紹介します。
rails-bootstrap-forms
フォームのコーディング量を格段に減らすことができます。
以下はrails-bootstrap-formsのサンプルコードからの引用です。6行の見慣れたフォームを作るコードでBootstrapのフォームになります。
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
出力結果は以下の通りです、いい感じですよね。
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="form-group">
<label for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email">
</div>
<div class="form-group">
<label for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="checkbox">
<label for="user_remember_me">
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
</label>
</div>
<input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>
labelやhelpの指定、カラムの指定、ブロックを使えるなど拡張性も高く汎用的に使えます。
simple_form
simple_formはRailsで一番使われているフォームビルダーだと思います。
フォームを作るときにオプションで--bootstrapと指定するだけです。
rails generate simple_form:install --bootstrap
実際にどのようなフォームになるのかは以下デモサイトを見てみるのが分かりやすいです。
フロントエンドValidation
RailsとBootstrapに直接関係があるわけではないですが、Rails/Bootstrap Likeなブラウザ内のバリエーションするにはNodが楽です。Railsのフォームから違和感少なく利用できます。
実際にどのような挙動になるのかは以下のデモサイトをご覧ください。
複数選択できるSelectBox
selectboxを複数選択できるようにしたい場合にはbootstrap-multiselect-railsがあります。
このgemは以下のプラグインをrailsとインテグレーションしたものです。
Toggle スイッチ
説明特に要らないかなと思い始めてきました。
WYSIWYG editor
ブログ記事やテキストエリアを高機能に入力し易くするsummernoteをrailsから使えるようにします。summernoteはBootstrap3.x.x対応です。
画像ファイルの動的なアップロードに対応したい場合は以下記事を参考にしてください。
rails4 + bootstrap + summernote(WYSIWYG Editor) とasync画像アップロードで快適なブログ記事編集フォームを実現
その他
Bootstrap本体以外での拡張やプラグインが以下ページにまとまっています。
ここに紹介されているものはRailsとのインテグレーションが準備されているものが多いです。
さいごに
質問などあればコメント欄にお願いします。直接メッセージや質問をしたい方はTwitterアカウント宛てにお願いします。