reForm: CSS Form Design Template for Any Layout (Part 2)

A couple of weeks ago, I posted an article about the formReForm Project. formReForm is a methodology to style HTML forms without a huge amount of markup (or [gasp] a Table-based layout). Taking it one step further, this article discusses how to use the formReForm javascript library to create usable, accessible and beautiful user input interfaces.

[Note: It was brought to my attention that the project name "reform" was already being used. So "reform" has been renamed to "formReForm" ... which is actually what it does. -- joe]

To see formReForm in action, take a look at the demo. What you'll see first is a non-styled form with default sized input elements. Click the "reForm this form GUI" button to see formReForm in action.

[img_assist|nid=1840|title=formReForm styles your forms.|desc=|link=none|align=right|width=275|height=242]All form elements (input, select, textarea, etc) are fixed-size by default. So we are handed a nasty bill-of-goods with each new web project:

• Form elements don't re-size in fluid layouts. This often creates imbalanced GUI, with everything huddled together on the left side of the screen.
• If a browser's window is too small, left-right scroll bars may result due to static-sized form elements.
• Form code re-use is difficult because style and lay out differ between projects
• 4-column form layout requirements often result in a table layout code.

The original posting generated several positive comments on other sites (such as CSS-Tricks.com, usabilita.blongosfere.it, and a google group posting). There's been some concerns, and hopefully this post will answer those questions.

How the formReForm.js Library Works

Last time we looked at how the DIVs and the CSS interact. This posting provides some basic screenshots and examples of how the Javascript modifies HTML DOM to create the intended effect.

Using formReForm requires just a few lines of javascript in your HTML:

// you have the option of dynamically loading the formReForm.css file:
formReForm.loadformReFormCss();
 				
// create the formReForm object and pass
// it the name of the form's DIV container:
formReForm = new FormReForm('fieldForm');

// apply the reForm to your GUi, 
formReForm.doReForm();

// done!

Next, create a basic HTML form:

<div class="fieldForm" id="fieldForm">
	<label for="givenName">First Name</label>
	<input name="givenName" id="givenName" value="Joe" type="text"/><br/>

	<label for="sirName">Last Name</label>
	<input name="sirName" id="sirName" value="Lippeatt" type="text"/><br/>

	<label for="phone">Phone</label>
	<input id="phone" name="phone" value="905 555 1212" type="text"/><br/>

	<!-- deleted for brevity -->

</div> 

which would typically result in a minimally formatted gui such as this:

[img_assist|nid=1806|title=Minimally Styled Form GUI|desc=The reForm "Before" image|link=popup|align=none|width=339|height=267]

Although its not real pretty, this form is completely accessible and usable. This is how a formReForm form block would look if Javascript was disabled.

formReForm works its magic after the page has been loaded by calling the javascript formReForm.doReform() method. This can be called by any event handling technique such as the body onload event. The demo file uses a click event for dramatic effect.

formReForm.doReform() manipulates DOM so that code that looks like this:

<label for="givenName">First Name</label>
<input name="givenName" id="givenName" value="Joe" type="text"/><br/>

is "reFormed" to look like this:

<div class="field50Pct">
	<div class="fieldItemLabel">
		<label for="givenName">First Name</label>
	</div>
	<div class="fieldItemValue">
		<input id="givenName" type="text" value="Joe" name="givenName"/>
	</div>
</div>

Although this appears to have an excessive number of div tags, consider that this is much more desirable than a table-based layout. The original markup is functional and semantic; formReForm.js and formReForm.css does all the heavy lifting.

The Results

All of these screen shots are from the same form markup. The only thing that has changed is the width of the browser window:

[img_assist|nid=1807|title=800px|desc=|link=popup|align=none|width=97|height=100]

At 800px, formReForm creates a nice 4-column layout with re-sized text boxes. There are some form fields that are twice as long as others, for example, the "Address" field.

[img_assist|nid=1808|title=540px|desc=|link=popup|align=none|width=67|height=100]

At 540px, textboxes and textareas automatically shrink to fit. Still plenty of room.

At 450px, textboxes drop below titles, but remain indented so the form is still usable.

At 290px, the form turns into a single column, the text boxes are indented and the form still looks great.

Notice that the form checkboxes also accommodates whatever space is available after formReForming.

The Project

formReForm is available on Google code where you can download the latest versions and demos. You can also submit bug reports and suggest updates. Hopefully, formReForm can provide you enough flexibility to create great, usable, well-designed user input forms.