#234 SimpleForm

Oct 04, 2010 | 7 minutes | Plugins, Forms

Simple Form is a convenient way to generate forms with many options to customize the generated markup.

Click to Play Video ▶

Download:
source codeProject Files in Zip (108 KB)
mp4Full Size H.264 Video (14.9 MB)
m4vSmaller H.264 Video (9.32 MB)
webmFull Size VP8 Video (22.4 MB)
ogvFull Size Theora Video (20.5 MB)

Browse Source Code

There is a newer version of this episode, see the revised episode.

Resources

          bash
        
bundle_install
rails g simple_form:install

          Gemfile
        
gem 'simple_form'

          rhtml
        
<%= simple_form_for @product do |f| %>
  <%= f.error_messages %>
  <%= f.input :name %>
  <%= f.input :price, :hint => "prices should be in USD" %>
  <%= f.input :released_on %>
  <%= f.association :category, :include_blank => false %>
  <%= f.input :rating, :collection => 1..5, :as => :radio %>
  <%= f.input :discontinued %>
  <%= f.button :submit %>
<% end %>

          stylesheets/application.css
        
.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

.simple_form div.input {
  margin-bottom: 10px;
}

.simple_form div.boolean, .simple_form input[type='submit'] {
  margin-left: 120px;
}

.simple_form div.boolean label, .simple_form label.collection_radio {
  float: none;
  margin: 0;
}

.simple_form label.collection_radio {
  margin-right: 10px;
  margin-left: 2px;
}

.simple_form .error {
  clear: left;
  margin-left: 120px;
  font-size: 12px;
  color: #D00;
  display: block;
}

.simple_form .hint {
  clear: left;
  margin-left: 120px;
  font-size: 12px;
  color: #555;
  display: block;
  font-style: italic;
}