Rails forms revisited
Saturday, October 11th, 2008
A couple months ago I wrote about Easier form styling in Rails applications. The method I explained involved overriding standard Rails form helpers in order to insert descriptive classes that can be used in your CSS. The impetus for this is that it’s hard to differentiate between the different types of <input /> elements without using CSS 2.1 attribute selectors, which aren’t supported in IE6.
The method I outlined in my previous article works great and is definitely saving me time and effort, but there’s room for improvement. I didn’t have helpers written for all the different form helpers in Rails and so had to keep adding to it as needed. I also hadn’t bothered working out new methods for some helpers that use slightly different arguments, such as button_to and submit_to_remote.
So in the interest of fixing the above, and also helping out anyone else who wants it, I’ve written up a comprehensive module that handles every Rails form helper I’m aware of. Supported are methods from the following modules:
- ActionView::Helpers::FormHelper
- ActionView::Helpers::FormTagHelper
- ActionView::Helpers::UrlHelper
- ActionView::Helpers::PrototypeHelper
This helper adds text_field, button, etc, classes to the HTML form elements generated by the standard Rails helper methods. See the code below for a list of the classes added when each method is used.
I’ve called my helper module FormClassifier and am releasing it free under the MIT License. Just drop it into your application’s helper directory and include it in your main ApplicationHelper.
The source is below. Get a plain text copy and usage instructions over at Corvid Labs.
################################################################################ # Form Classifier # Adds helpful class names to HTML form elements ################################################################################ # Overrides commonly-used Rails form methods in order to add descriptive # class names for use in CSS. ################################################################################ module FormClassifier # Methods from FormHelper # http://api.rubyonrails.com/classes/ActionView/Helpers/FormHelper.html # Class: "check_box" def check_box(object_name, method, options = {}, checked_value = "1", unchecked_value = "0") options = check_options(options) options[:class] << 'check_box' super(object_name, method, options, checked_value, unchecked_value) end # Class: "file_field text_field" def file_field(object_name, method, options = {}) options = check_options(options) options[:class] << 'file_field' super(object_name, method, options) end # Class: "hidden_field text_field" def hidden_field(object_name, method, options = {}) options = check_options(options) options[:class] << 'hidden_field' super(object_name, method, options) end # Class: "password_field text_field" def password_field(object_name, method, options = {}) options = check_options(options) options[:class] << 'password_field' super(object_name, method, options) end # Class: "radio" def radio_button(object_name, method, tag_value, options = {}) options = check_options(options) options[:class] << 'radio' super(object_name, method, tag_value, options) end # Class: "text_area" def text_area(object_name, method, options = {}) options = check_options(options) options[:class] << 'text_area' super(object_name, method, options) end # Class: "text_field" def text_field(object_name, method, options = {}) options = check_options(options) options[:class] << 'text_field' super(object_name, method, options) end # Methods from FormTagHelper # http://api.rubyonrails.com/classes/ActionView/Helpers/FormTagHelper.html # Class: "check_box" def check_box_tag(name, value = "1", checked = false, options = {}) options = check_options(options) options[:class] << 'check_box' super(name, value, checked, options) end # Class: "file_field text_field" def file_field_tag(name, options = {}) options = check_options(options) options[:class] << 'file_field' super(name, options) end # Class: "hidden_field text_field" def hidden_field_tag(name, value = nil, options = {}) options = check_options(options) options[:class] << 'hidden_field' super(name, value, options) end # Class: "image_submit" def image_submit_tag(source, options = {}) options = check_options(options) options[:class] << 'image_submit' super(source, options) end # Class: "password_field text_field" def password_field_tag(name = "password", value = nil, options = {}) options = check_options(options) options[:class] << 'password_field' super(name, value, options) end # Class: "radio" def radio_button_tag(name, value, checked = false, options = {}) options = check_options(options) options[:class] << 'radio' super(name, value, checked, options) end # Class: "select" def select_tag(name, option_tags = nil, options = {}) options = check_options(options) options[:class] << 'select' super(name, option_tags, options) end # Class: "button" def submit_tag(value = "Save changes", options = {}) options = check_options(options) options[:class] << 'button' super(value, options) end # Class: "text_area" def text_area_tag(name, content = nil, options = {}) options = check_options(options) options[:class] << 'text_area' super(name, content, options) end # Class: "text_field" def text_field_tag(name, value = nil, options = {}) options = check_options(options) options[:class] << 'text_field' super(name, value, options) end # Methods from UrlHelper # http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html # Class: "button" def button_to(name, options = {}, html_options = {}) html_options = check_options(html_options) html_options[:class] << 'button' super(name, options, html_options) end # Methods from PrototypeHelper # http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html # Class: "button" def submit_to_remote(name, value, options = {}) options[:html] ||= Hash.new options[:html] = check_options(options[:html]) options[:html][:class] << 'button' super(name, value, options) end private def check_options(options) # Make sure :class key exists in hash, append space if it does options[:class] ||= String.new options[:class] += options[:class].length == 0 ? '' : ' ' return options end end
Download a plain text copy of FormClassifier and usage instructions at Corvid Labs.


Comments
Awesome! Exactly what I’ve been loking for … thank you so much for sharing!
Thank you for this. Saved lots of time and is greatly appreciated.
Your comments are welcome
I'll help where I can. If you're really stuck, I'm available for consulting on an hourly or project basis. Get in touch for details.
Comment notes
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">