Now I've finally gotten this out of the way...

I've always wanted to produce semantically correct HTML forms. But sometimes, life gets in the way, styling incompetence, laziness, and I end up having forms that look like:

<form ... >
  <b>Name:</b><input ... /><br />
  <b>Email:</b><input ... /><br />
</form>
   

Yuck.

I recently got around to clarify what is the more "correct" markup to use at the WebSG mailing list, and this is the one I settled with

<form ... >
  <fieldset>
    <legend>Some Context</legend>
    <dl>
      <dt><label for="someid">Name</label></dt>
      <dd><input id="someid" ... /></dd>
    <dl>
  </fieldset>
</form>
   

Ok. But that'll be a pain to write. Even if something generated the HTML files for me, there is still a lot of markup noise in there to be comfortable maintaining. So I'd set out to define what I'd like to write for Rails to render the above HTML

<% form_for :some do |f| %>
  <% f.fieldset 'Some Context' do |f| %>
    <%= f.text_field :name %>
  <% end %>
<% end %>
   

Tighter code, less HTML noise in the file to distract me from the task at hand (the attributes, values, etc). Once I cook up a base style for this form, CSS will save me from all future look & feel changes... *blissful expression*

 1. cd $RAILS_ROOT # your current Rails app
 2. svn export http://choonkeat.svnrepository.com/svn/rails-plugins/web_sg_form_builder . --force
 3. ./script/server
 4. Go to http://localhost:3000/web_sg_form_builder

And you should get this page of instruction / demo:

 

Comments

[Daniel Wintschel]

Choon Keat - I was looking for something like this earlier today. You're my new hero.

-d

[Aníbal Rojas]

Take a look at Markaby and HAML as alternate markups.

[Kevin Marsh]

Very nice... I've actually been using this exact markup to layout forms, so this should come in handy. Thanks!

[choonkeat]

@anibal: Markaby doesn’t rub me the right way for html, though i totally love builder/rxml. don’t ask me why! But Haml.. haml haml.. its so crazy it might just work towards a greater good! hmmmmmmmmmmmmmmmmmmmm

@daniel, @kevin: do check the latest revision. I have 1) reorganized so it can be used as pure plugin, 2) introduced “dl? method (no more – i promise!) and 3) simplified the example for clarity