Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

[Deprecated] A form builder that generates semantic HTML as advocated by Andy Budd in CSS Mastery.

branch: master

Merge branch 'master' of github.com:airblade/air_budd_form_builder

* 'master' of github.com:airblade/air_budd_form_builder:
  Reminder to use Web forms design guidelines.
latest commit 889fbb886a
Andy Stewart authored February 02, 2011
Octocat-spinner-32 icons Added + for new forms. April 14, 2008
Octocat-spinner-32 lib acutally fix deprec February 19, 2009
Octocat-spinner-32 tasks First draft. January 02, 2008
Octocat-spinner-32 test First draft. January 02, 2008
Octocat-spinner-32 .gitignore fix annoying deprec warnings February 19, 2009
Octocat-spinner-32 MIT-LICENSE Tweaked copyright. January 02, 2008
Octocat-spinner-32 README.markdown Merge branch 'master' of github.com:airblade/air_budd_form_builder February 02, 2011
Octocat-spinner-32 Rakefile First draft. January 02, 2008
Octocat-spinner-32 init.rb Added automatic detection of mandatory fields by borrowing Dan Webb's October 06, 2008
Octocat-spinner-32 install.rb First draft. January 02, 2008
Octocat-spinner-32 uninstall.rb First draft. January 02, 2008
README.markdown

AirBuddFormBuilder

Please note I am no longer working on this. It did the job admirably for a long time, but I now use Simple Form instead.

A form builder that generates semantic HTML as advocated by Andy Budd in CSS Mastery.

It generates Wufoo-style buttons and links for submitting the form, cancelling it, etc. These buttons and links use several icons from the FAMFAMFAM set. You can choose not to use them if you don't want to.

Please send feedback to boss@airbladesoftware.com.

HAML

Thanks to David Baldwin, this form builder can be used with HAML.

ERB Example

app/views/projects/new.html.erb:

<% airbudd_form_for @project do |f| %>
  <%= f.text_field :title, :required => true, :label => "Article's Title" %>
  <% f.buttons do |b| %>
    <%= b.save %>
    <%= b.cancel :url => projects_path %>
  <% end %>
<% end %>

This renders:

<form ...> <!-- standard Rails form element -->
  <p class="text">
    <label for="article_title">Article's Title:
      <em class="required">(required)</em>
    </label>
    <input id="article_title" name="article[title]" type="text" value=""/>
  </p>
  <div class="buttons">
    <button type="submit" class="positive"><img src="/images/icons/tick.png" alt=""/> Save</button>
    <a href="/projects"><img src="/images/icons.pencil.png" alt=""/> Cancel</a>
  </div>
</form>

And if the field's value is invalid:

<p class="error text">
  <label for="article_title">Article's Title:
    <em class="required">(required)</em>
    <span class="feedback">can't be blank</span>
  </label>
  <input id="article_title" name="article[title]" type="text" value=""/>
</p>

See Mr Budd's good book for discussion of the HTML and the CSS to go with it.

Required fields

Thanks to Bill, the form builder automatically detects required fields (by looking for :validates_presence_of in the model) and marks them up appropriately.

Configuration

Thanks to Dan Webb, whose Enhanced Form Builder configuration I borrowed.

You can configure the form builder at three levels: app-wide, per-form, and per-field. The per-field configuration differs slightly from the other two.

  • App-wide:

config/initializers/form_builder.rb:

AirBlade::AirBudd::FormBuilder.default_options.merge!({
  :required_signifier => '*',
  :label_suffix => '',
})
  • Per form:

In your form:

- airbudd_form_for @member do |f|
  - f.required_signifier = '*'
  = f.text_field :name
  • Per field:

On a form field:

= f.text_field :name, :required => true, :suffix => ''

See the comments in the form builder's code for the exact configuration options available.

To Do

  • Incorporate cxpartners' excellent Web forms design guidelines.
  • Fix country_select so it handles priority countries and options. It's currently broken.
  • Wrapper for options_group_from_collection_for_select.
  • DRY way to show consistent form links, e.g. edit, outside a form.
    • include link_to_function, link_to_remote, etc.
    • Cf AirBlade::AirBudd::FormHelper#link_to_form.
    • Do we need to wrap buttons/links in a div? (Probably semantically good to do so?)
  • Two read-only field helpers: one for within a form, containing the value so it can be submitted, and one for the 'show' page, so we can use the same markup and CSS (c.f. http://tomayko.com/writings/administrative-debris)..
  • Example CSS:
    • for Wufoo-style buttons and links.
    • for CSS Mastery XHTML.
  • Summary error messages.
  • Consider how to handle multiple actions, e.g. 'save & create another', 'save & keep editing'. See Brandon Keepers's with_action plugin.

Copyright (c) 2007 Andrew Stewart, released under the MIT license.

Something went wrong with that request. Please try again.