reForm: CSS Form Design Template for Any Layout

The Problem

Good form UI is a real challenge for designers. Form elements need to be large enough that users can view and edit data, but fit within an otherwise great design. The size of Basic HTML form element is typically static.

Designs based on the fluid layout may find form elements huddled together on the left with a lot of white-space on the right. A well-balanced design can be lost to a left-aligned, imbalanced group of form elements.

Or a designer may find themselves using tables to manage the form layout. This complicates tab-flow, usability and accessibility.

Possible Solution

The reForms technique is a CSS and Javascript solution I'm working on for form design issues. Although it isn't complete, I'm providing a few code snips from the CSS and HTML that may be useful to other developers.

This post describes a form element layout technique that will shrink and grow with the available space. This allows designers to create 2 and 4 column form layouts without breaking the design. It also allows the user to resize their browser window and change font size without rendering the form unusable.

A Demo

You can also play with a demo here. Note the changes to the GUI as you re-size browser window. All three of these screen shots were created with the exact same markup and CSS. The only difference is the available real-estate.

Large Container Window:

Smaller Container Window:

Very Narrow Container Window:

In The Future (To Be Continued ...)

Currently, reForm modifies the interface as real estate changes. However, the behavior for some form elements hasn't been nailed down (such as check boxes, radio buttons and textareas). Also, I'm working on a javascript framework to automatically generate the pattern in DOM.

Business Driver/ROI

The company I work for is currently evaluating various portions of our design pattern, and the Self-Adjusting Form GUI is one of the items that has evolved through the process.

To note: I'm not joining the fluid-vs-fixed layout debate with this post. Regardless if your design is fluid, having a usable, reproducible form pattern is good for productivity, User Experience and maintainability.

Here's the CSS used to create the reForm layout in the demo:

.fieldForm div .fieldItemValue 
{
	padding-left:10px;
}
.fieldForm .fieldItemLabel 
{
	width:5em;
	float:left;
}
.fieldForm .fieldItemLabel label 
{
	font-weight:bolder;
	white-space:nowrap;
}
.fieldForm .field100Pct, 
.fieldForm .field50Pct 
{
	min-width: 200px;
}
.fieldForm .field100Pct .fieldItemValue, 
.fieldForm .field50Pct .fieldItemValue 
{
	display:inline;
}
.fieldForm .field100Pct .fieldItemValue input 
{
	width:80%;
	min-width:200px;
}

.fieldForm .field50Pct .fieldItemValue input 
{
	width:60%;min-width:100px;
}
.fieldForm .field50Pct {
	float:left;
	width:49.9%;
}
.fieldForm div div input 
{
	margin-bottom:10px;
	margin-right:15px;
}
.clear {clear:both;}		

Take a look at the code in the demo file. Here's an snip of the HTML pattern for the form.

    <div class="fieldForm" id="fieldForm" >
	    <div class="field50Pct">
		    <div class="fieldItemLabel">
			    <label for="field1">First Name:</label>
		    </div>
		    <div class="fieldItemValue">
                <input type="text" id="field1" name="field1" value="form field 1 value" />
		    </div>								
	    </div>
    	
	    <div class="field50Pct">
		    <div class="fieldItemLabel">
			    <label for='field2'>Last Name:</label>
		    </div>
		    <div class="fieldItemValue">
                <input type="text" id="field2" name="field2" value="form field 2 value" />
		    </div>								
	    </div>
    	
	    <div class="clear"></div>

	

This technique isn't complete. It does not take select boxes or other input types into account, but hopefully it will provide a good starting point while you build your design patterns.