We have been working on SimpleForm for some time since the last release and have got a lot of contributions from community. Now it is time for a new release with more HTML 5 compatibility plus some new cool features. So, without further ado, lets take a ride on the new stuff.<\/p>\n
One of the most useful features coming in HTML 5, in my opinion, is the placeholder option. This option allows us to configure a text to be shown inside the input when it is empty. This is really nice to help the user while filling out forms. SimpleForm now gives us the possibility to pass in a placeholder option in the same way we are used to do with use hints:<\/p>\n
\r\n<%= simple_form_for @user do |f| %>\r\n <%= f.input :username, :label => 'Your username please' %>\r\n <%= f.input :password, :hint => 'No special characters.' %>\r\n <%= f.input :email, :placeholder => 'user@domain.com' %>\r\n <%= f.button :submit %>\r\n<% end %>\r\n<\/pre>\nAs you can see here, the placeholder is given as String, but it can also be fetched from I18n, as labels\/hints does.<\/p>\n
Another addition is the automatic lookup of min\/max values from numericality validations, for number<\/code> inputs. For instance:<\/p>\n\r\nclass User\r\n validates_numericality_of :age, :greater_than_or_equal_to => 18,\r\n :less_than_or_equal_to => 99, :only_integer => true\r\nend\r\n<\/pre>\n\r\n<%= simple_form_for @user do |f| %>\r\n <%= f.input :age %>\r\n<% end %>\r\n<\/pre>\nWould generate an input with type number, and the min\/max attributes configured with 18 and 99, respectively.<\/p>\n
Besides that SimpleForm also adds:<\/p>\n
\n- the
:required<\/code> html attribute for required inputs (it is retrieved automatically from your presence validations);<\/li>\n- the
:search<\/code> and :tel<\/code> input types, with :tel<\/code> mapping automatically for attributes matching \/phone\/<\/code>.<\/li>\n<\/ul>\nCollections<\/h3>\n
From now on, radio and check box collections will wrap the input element inside the label, making it pretty straightforward to associate both elements. Besides that, SimpleForm now comes with two new configurations:<\/p>\n
\ncollection_wrapper_tag<\/code> wraps the entire collection in the configured tag;<\/li>\nitem_wrapper_tag<\/code> wraps each item in the collection using the configured tag.<\/li>\n<\/ul>\nAn example:<\/p>\n
\r\n<%= simple_form_for @user do |f| %>\r\n <%= f.association :roles, :as => :check_boxes, \r\n :collection_wrapper_tag => :ul, :item_wrapper_tag => :li %>\r\n<% end %>\r\n<\/pre>\nThis should be kind of self explanatory =).<\/p>\n
New input options<\/h3>\n
It’s now possible to give the :disabled<\/code> option straight to the input, which will also add the disabled<\/code> css class to both input and wrapper elements:<\/p>\n\r\n<%= simple_form_for @user do |f| %>\r\n <%= f.input :email, :disabled => true %>\r\n<% end %>\r\n<\/pre>\nAnd also the :components<\/code> option, which will only render the given components in the given order:<\/p>\n\r\n<%= simple_form_for @user do |f| %>\r\n # Generates the label after the input, and ignores errors\/hints\/placeholders\r\n <%= f.input :email, :components => [:input, :label] %>\r\n<% end %>\r\n<\/pre>\nNew configuration options<\/h3>\n
If you are not using any label \/ hint \/ placeholder with I18n, you can now completely disable the translation lookup of these components by setting the config.translate<\/code> to false<\/code> in your SimpleForm initializer. This should improve performance a bit in these cases.<\/p>\nAnother nice improvement is the ability to add custom input mappings to SimpleForm. If you ever needed to map a specific attribute to a default input, now you can:<\/p>\n
\r\n config.input_mappings = { \/_count$\/ => :integer }\r\n<\/pre>\nThis configuration expects a hash containing a regexp to match as key, and the input type that will be used when the field name matches the regexp as value. In this example we match all attributes ending with _count<\/code>, such as comments_count<\/code>, to be rendered as integer input by SimpleForm.<\/p>\nNew docs and mailing list<\/h3>\n
SimpleForm now has its own google group<\/a> where you can ask questions, search for already answered questions and also help others. Besides that, you can also navigate and search the entire RDoc<\/a>.<\/p>\nWrapping up<\/h3>\n
As you can see, there are plenty of new and cool stuff in this release. We encourage you to take a look at the CHANGELOG<\/a> and also review the README<\/a> to see what else is available and some more examples.<\/p>\nAnd please, check out SimpleForm contributors<\/a>, we want to thank everyone who is helping us to improve SimpleForm.<\/p>\nWhat about you? Do you want any cool feature in SimpleForm? Help us improve it by forking and sending us a pull request, we will be really glad to apply it. We hope to see your name in the contributors page soon!<\/p>\n
Finally, in your opinion, what is the coolest feature SimpleForm has? And what idea you have you might want to be added to SimpleForm? Feel free to comment \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"
We have been working on SimpleForm for some time since the last release and have got a lot of contributions from community. Now it is time for a new release with more HTML 5 compatibility plus some new cool features. So, without further ado, lets take a ride on the new stuff. HTML 5 One … \u00bb<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[82,125,92,115,105],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1529"}],"collection":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":23,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1529\/revisions"}],"predecessor-version":[{"id":2052,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1529\/revisions\/2052"}],"wp:attachment":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/media?parent=1529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/categories?post=1529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/tags?post=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}