1. Inp

    Posted

    Inp
Changes in title
+Simple_formの使い方
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,106 @@
+#simple_formの使い方
+
+すぐに忘れてしまうので個人的メモ
+
+##インストール方法
+
+Gemfileに記述
+
+```lang:Gemfile
+gem 'simple_form'
+```
+
+ターミナルからインストールする
+
+```lang:terminal
+unchiman: ~/workspace $ bundle install
+```
+
+simple_formをbootstrapに適用させる
+※bootstrapを使わない場合は--bootstrapを削除
+
+```lang:terminal
+unchiman: ~/workspace $ rails generate simple_form:install --bootstrap
+```
+
+##使い方
+
+投稿フォームへ記述する
+
+```lang:投稿フォームのview.html.erb
+<%= simple_form_for @user do |f| %>
+ <%= f.input :username %>
+ <%= f.input :password %>
+ <%= f.button :submit %>
+<% end %> --bootstrap
+```
+
+scaffoldで「user」で自動生成した場合は一度下記のコマンドを入力してbootstrapを更新。
+
+```lang:terminal
+unchiman: ~/workspace $ rails g bootstrap:themed Users
+```
+フォームが変更されているのを確認して、サーバーの再起動!
+
+```lang:_form.html.erb
+<%= simple_form_for @user, :html => { :class => 'form-horizontal' } do |f| %>
+ <%= f.input :name %>
+ <%= error_span(@user[:name]) %>
+ <%= f.input :password %>
+ <%= error_span(@user[:password]) %>
+ <%= f.input :email %>
+ <%= error_span(@user[:email]) %>
+ <%= f.input :regist_date %>
+ <%= error_span(@user[:regist_date]) %>
+
+ <%= f.button :submit, :class => 'btn-primary' %>
+ <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
+ users_path, :class => 'btn btn-default' %>
+<% end %>
+```
+
+##オプションについて
+
+カンマで区切って追加していく
+
+```lang:_form.html.erb
+<%= simple_form_for @user do |f| %>
+ <%= f.input :name, オプション %>
+```
+ラベル名の変更
+`label: "ラベル名"`
+
+ラベル名を消す
+`label: false`
+
+エラーメッセージ(投稿に失敗したときに表示される)
+`error: "エラーでおま"`
+
+エラーメッセージを表示させない
+`error: false`
+
+ヒントメッセージ(エラーと違って常に表示される)
+`hint: "ヒントでおま"`
+
+プレースホルダー
+`placeholder: "プレースホルダー"`
+
+ファイルの投稿フォームにする(file_field)
+`as: :file`
+
+ボタンの表示を変える
+`"押してね"`
+
+以下記入サンプル
+```lang:_form.html.erb
+ <%= f.input :name, label: "ラベル名", error: 'エラーを表示する' %>
+ <%= f.input :body, placeholder: 'プレースホルダー', label: false %>
+ <%= f.input :image, as: :file %><%# as: :fileでアップロードフォームが作れる %>
+ <%= f.input :styles, hint: 'ヒントの表示', error: flase%>
+ <%= f.button :submit, "押してね", :class => 'btn-primary' %>
+```
+
+実行サンプル画像
+
+![alt](http://kyouyama26.oops.jp/monooki/simple_form.png)
+