SimpleForm 1.3: more HTML 5 goodness and new stuff

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 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:

<% 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.button :submit %>
<% end %>

As you can see here, the placeholder is given as String, but it can also be fetched from I18n, as labels/hints does.

Another addition is the automatic lookup of min/max values from numericality validations, for number inputs. For instance:

class User
  validates_numericality_of :age, :greater_than_or_equal_to => 18,
    :less_than_or_equal_to => 99, :only_integer => true
end
<% simple_form_for @user do |f| %>
  <% f.input :age %>
<% end %>

Would generate an input with type number, and the min/max attributes configured with 18 and 99, respectively.

Besides that SimpleForm also adds:

  • the :required html attribute for required inputs (it is retrieved automatically from your presence validations);
  • the :search and :tel input types, with :tel mapping automatically for attributes matching /phone/.

Collections

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:

  • collection_wrapper_tag wraps the entire collection in the configured tag;
  • item_wrapper_tag wraps each item in the collection using the configured tag.

An example:

<% simple_form_for @user do |f| %>
  <% f.association :roles :as=""> :check_boxes, 
    :collection_wrapper_tag => :ul, :item_wrapper_tag => :li %>
<% end %>

This should be kind of self explanatory =).

New input options

It’s now possible to give the :disabled option straight to the input, which will also add the disabled css class to both input and wrapper elements:

<% simple_form_for @user do |f| %>
  <% f.input :email :disabled=""> true %>
<% end %>

And also the :components option, which will only render the given components in the given order:

<% simple_form_for @user do |f| %>
  # Generates the label after the input, and ignores errors/hints/placeholders
  <% f.input :email :components=""> [:input, :label] %>
<% end %>

New configuration options

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 to false in your SimpleForm initializer. This should improve performance a bit in these cases.

Another 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:

  config.input_mappings = { /_count$/ => :integer }

This 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, such as comments_count, to be rendered as integer input by SimpleForm.

New docs and mailing list

SimpleForm now has its own google group 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.

Wrapping up

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 and also review the README to see what else is available and some more examples.

And please, check out SimpleForm contributors, we want to thank everyone who is helping us to improve SimpleForm.

What 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!

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 😀

5 responses to “SimpleForm 1.3: more HTML 5 goodness and new stuff”

  1. iain says:

    Nice! Keep up the good work guys!

  2. The placeholder options it’s a nice addition to the library. Thanks!

  3. Anonymous says:

    Great library, very lightweight, and I am implementing it throughout all my projects. Almost all of my integration tests still passed after dropping this in for formtastic (after ‘semantic’ -> ‘simple’).

    The only thing that is really lacking is documentation about adding new form element types. Basically I say this only because:

    The :tel option seems to be nothing more than adding a class of tel to the input field. Is the intention for js to come in and customize the text inputs based on their css classes? I realize that phone numbers are *massively* complicated with internationalization, so having a phone element be too flexible is probably a pain for you guys to do. So on my end I want to add the phone element I made for formtastic so I’m searching for a *clean* way to do that.

    If there was even a simple example of doing this sort of thing it would be awesome. As it is I am cobbling a solution together that works via monkeypatching, but since that’s not very Rails-3-ish I was wondering what the “official” plataforma technique is for extending simple_form.

    Thanks!

  4. Hello mate, thanks for your feedback.

    Just to clarify, the :tel option, besides adding the css classes, also changes the input type of the field in question (input[type=tel]), which is a new HTML5 option.

    Now about the lack of docs on how to add new form element types, you are right. We are planning to write a new blog post on that subject soon, so stay tunned =).
    Thanks for the tip.

  5. dpickett says:

    I’m a huge fan of this library. I recently switched over from Formtastic to it because I felt it was less opininated about markup and had better i18n support. You achieve a nice balance on how heavily the utility can be configured as well.

    Nice work! I’m looking forward to its continued development!