formReForm Rendering Library for HTML Forms

formReForm takes a group of typical HTML form elements and creates a nice, clean, styleable form layout in 1, 2, or 4 columns.

See the screenshots in this article for examples: reForm: CSS Form Design Template for Any Layout (Part 2)

The Itch

Multi-column layouts for form elements have been a challenge; some developers find that their only option is a table-based layout or use only two columns (label + field). As Responsive Design techniques have evolved, so must Responsive Forms. Without knowing the exact size of the viewport or form container, a Responsive Form component would allow developers to layout a simple form and allow CSS/JS to the heavy lifting.

The Scratch

formReForm uses CSS to take usable, accessible and correctly coded form elements and formReForms them into a style to fit any design and layout. The current rendering method for this transformation is Javascript, but server-side rendering of the technique is also possible.

The Details and Examples

The formReForm project started with two articles at dzone.com. The original concept of using CSS to create a usable form was discussed the article reForm: CSS Form Design Template for Any Layout. Taking the idea one step further, the javascript library is discussed in the article reForm: CSS Form Design Template for Any Layout (Part 2)

The Invite

The end goal of this concept is valid html that can be styled to fit any layout. There are some limitations with the current library (only 4 columns are supported (label:field,label:field), for example). Others are invited to contribute or comment.

The Rights

It's GPL. Use, abuse, distribute, contribute ... but always attribute.

The Small Print

The formReForm Library is (c)Joe Lippeatt - ext237@gmail.com.