Formをシンプルに書きたいので、両者を比較するメモ

結論

  • bootstrapを使っている場合は、bootstrap_formのほうが使いやすい
  • そうではない場合は、simple_formを使うとシンプルにかけるかも知れません、それほど役に立てないかも知れません

前提

  • rails 4.2.6
  • bootstrap 3 を使う
  • rails g model post title body:text draft:boolean published_at:datetime

比較ポイント

  • 縦レウアウトのフォーム
    • 日付フィールドのほうはbootstrap_formが楽勝
    • simple_form

        = simple_form_for @post, url: simple_forms_path do |f|
          = f.input :title
          = f.input :body
          = f.input :draft
          = f.input :published_at
          = f.button :submit
      
    • bootstrap_form

        = bootstrap_form_for @post, url: bootstrap_forms_path do |f|
          = f.text_field :title
          = f.text_area :body
          = f.check_box :draft
          = f.datetime_select :published_at
          = f.submit
      
  • 横レイアウトのフォーム
    • simple_form

        = simple_form_for @post, url: simple_forms_path, wrapper: :horizontal_form, html: { class: 'form-horizontal' } do |f|
          = f.input :title
          = f.input :body
          .form-group
            .col-md-9.col-md-offset-3
              = f.input :draft
          = f.input :published_at
          .form-group
            .col-md-9.col-md-offset-3
              = f.button :submit
      
    • bootstrap_form

        = bootstrap_form_for @post, layout: :horizontal, label_col: 'col-md-2', control_col: 'col-md-10', url: bootstrap_forms_path do |f|
          = f.text_field :title
          = f.text_area :body
          = f.form_group do
            = f.check_box :draft
          = f.datetime_select :published_at
          = f.form_group do
            = f.submit
      
  • requiremaxlengthなどの自動設定
    • require両方ともvalidates :title, presence: trueによって自動的にrequiredのCSSクラスが付与される
      • simple_form
        • CSSの表現もデフォルトで付いている
      • bootstrap_form
        • デフォルトはCSSのクラス付与だけ、どう表現するかは自分でCSSを書く必要がある

          label.required:before
            content: " *"
          
    • maxlength, sizeは両方とも生成されない
  • エラー情報の表示
    • 両方ともフィールドの下に表示してくれる
  • I18n
    • 両方ともデフォルトでモデルのI18n設定を読み取ってくれる
  • 入力フィールドの種類