rails simple_form

1、安装插件gem 'simple_form'

2、初始化，运行rails generate simple_form:install，生成以下文件

 此时便可以在from中使用了

3.简单的引用、

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

<%= f.input :username %>会生成
<div class="input string optional user_username">
  
  

   
   

    
    

     
     <label class="string optional control-label" for="user_username">Name</label>
    
    
   
   
   
   

    
    

     
     <input id="user_username" class="string optional" type="text" name="user[username]">
    
    
   
   
  
  
  
  

   
   </div>
  
  

4.修改默认标签的内容

<%= simple_form_for @user do |f| %>
  <%= f.input :username, label: 'Your username please' %>
  <%= f.input :password, hint: 'No special characters.' %>
  <%= f.input :email, placeholder: 'user@domain.com' %>
  <%= f.input :remember_me, inline_label: 'Yes, remember me' %>
  <%= f.button :submit %>
<% end %

label：是文本框前的信息

hint：是一些提示信息，类似验证时的提示

placeholder：占位符

5.关闭默认标签

<%=f.input:username,label: false %>

6.修改文本框的属性

<%= simple_form_for @user, defaults: { input_html: { class: 'default_class' } } do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>
defaults是一些默认的值，会加到每个input标签中，对文本框内部属性的修改使用input_html，下面是input对应的类型

  
  
Mapping
Generated HTML Element
Database Column Type
boolean
input[type=checkbox]
boolean
string
input[type=text]
string
email
input[type=email]
string with name =~ /email/
url
input[type=url]
string with name =~ /url/
tel
input[type=tel]
string with name =~ /phone/
password
input[type=password]
string with name =~ /password/
search
input[type=search]
-
text
textarea
text
file
input[type=file]
string responding to file methods
hidden
input[type=hidden]
-
integer
input[type=number]
integer
float
input[type=number]
float
decimal
input[type=number]
decimal
range
input[type=range]
-
datetime
datetime select
datetime/timestamp
date
date select
date
time
time select
time
select
select
belongs_to/has_many/has_and_belongs_to_manyassociations
radio_buttons
collection ofinput[type=radio]
belongs_to associations
check_boxes
collection ofinput[type=checkbox]
has_many/has_and_belongs_to_many associations
country
select (countries as options)
string with name =~ /country/
time_zone
select (timezones as options)
string with name =~ /time_zone/

7.修改标签的属性
<%= simple_form_for @user do |f| %>
  <%= f.input :username, label_html: { class: 'my_class' } %>
  <%= f.input :password, hint: false, error_html: { id: 'password_error'} %>
  <%= f.input :password_confirmation, label: false %>
  <%= f.button :submit %>
<% end %>
label_html:修改label标签的属性
error_html:修改错误提示标签的属性

8.修改外层标签的样式

<%= simple_form_for @user do |f| %>
  <%= f.input :username, wrapper_html: { class: 'username' } %>
  <%= f.input :password, wrapper_html: { id: 'password' } %>
  <%= f.input :remember_me, wrapper_html: { class: 'options' } %>
  <%= f.button :submit %>
<% end %>
wrapper_html:修改生成的最外部标签的值

9.设置文本框的类型

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.input :description, as: :text %>
  <%= f.input :accepts,     as: :radio_buttons %>
  <%= f.button :submit %>
<% end %>
默认情况下，f.input 生成的标签类型都为文本框，如果要修改其类型，可以用as 修改

10.关联的表

class User < ActiveRecord::Base
  belongs_to :company
  belongs_to :roles
end

class Company < ActiveRecord::Base
  has_many :users
end

class Role < ActiveRecord::Base
  has_many :users
end

<%= simple_form_for @user do |f| %>
  <%= f.input :name %>
  <%= f.association :company %>
  <%= f.association :roles %>
  <%= f.button :submit %>
<% end %>
以上的选项中，关联关系的表是以对象出现的，下面的是将它的值转化为id，显示信息为name
f.association :company, label_method: :company_name, value_method: :id, include_blank: false