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 %>会生成4.修改默认标签的内容<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>
<%= 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 |
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 %>9.设置文本框的类型wrapper_html:修改生成的最外部标签的值
<%= 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,显示信息为namef.association :company, label_method: :company_name, value_method: :id, include_blank: false