I'm now blogging here, you should go there. Follow me on twitter here.

Real Buttons in Rails - A Route to Sexy Forms

25 May 2007

I’ve retired this plugin, as in the intervening years (this article was written in 2007) I’m back to using the standard input tags, mainly due to improved CSS controls in modern browsers and a desire not to faff about with the cross-browser CSS to make them look ok.

Coming from a CSS/XHTML Web Standards background my approach to Rails has been slightly different from others. My views on the borderline heretical inline Javascript of some of the more AJAX-y methods has been dealt with by Dan and Luke and their utterly fabulous Unobtrusive Javascript plugin.

If you want to know what I’m talking about, look at the words of the masters or check out Dan’s slides from Rails Conf ’07. Suffice to say Javascript should always be an addition to an already functional website, unless it’s doing something really clever (Google Maps, I’m looking at you).

However, whilst getting into RESTful Rails on my current project, I’ve needed to continually use buttons (button_to) for changes of state. Just like a good Rails programmer should when using POST or DELETE requests i.e. ‘Add to Carts’ or more seriously ‘Delete’ objects. This leads to layout issues, the input tags generated are hideous on Firefox and not stylable (Aqua only) on Safari. The different sizes also mess with my lovely horizontal grid!

Then I rediscovered the button element with many thanks to the lovely chaps at particle tree creators of an awesome online form maker. The gist of the article is that the button element is a clever little bugger than can be styled much more freely than the typical input submit button and is more flexible than a load of image submits. You can look at the article for their approach.

All I’ve done is created a mixin to create a couple of view helpers which you can use in place of the regular button_to and submit_tag they are based from the existing versions and simply provide a button tag instead of an input tag.

This means however you can do much sexier looking buttons the proper way using CSS (see the particle tree article to start) and stop using that horrible link_to with :method => :delete javascript nonsense.