DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Designing a New Framework for Ephemeral Resources
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices
  • What to Pay Attention to as Automation Upends the Developer Experience
  • Logging Best Practices Revisited [Video]

Trending

  • Designing a New Framework for Ephemeral Resources
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices
  • What to Pay Attention to as Automation Upends the Developer Experience
  • Logging Best Practices Revisited [Video]
  1. DZone
  2. Coding
  3. Languages
  4. reForm: CSS Form Design Template for Any Layout (Part 2)

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

Joe Lippeatt user avatar by
Joe Lippeatt
·
Mar. 18, 08 · News
Like (0)
Save
Tweet
Share
21.10K Views

Join the DZone community and get the full member experience.

Join For Free

 

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.

[img_assist|nid=1809|title=450px|desc=|link=popup|align=none|width=55|height=100]

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

[img_assist|nid=1810|title=290px|desc=|link=popup|align=none|width=36|height=100]

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.

[img_assist|nid=1811|title=Unstyled|desc=|link=popup|align=left|width=100|height=97] [img_assist|nid=1812|title=750px|desc=|link=popup|align=left|width=100|height=98] [img_assist|nid=1813|title=540px|desc=|link=popup|align=left|width=75|height=100] [img_assist|nid=1814|title=290px|desc=|link=popup|align=left|width=40|height=100]

 

 

 

 

 

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.

 

 

 

Form (document) CSS Template Design

Opinions expressed by DZone contributors are their own.

Trending

  • Designing a New Framework for Ephemeral Resources
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices
  • What to Pay Attention to as Automation Upends the Developer Experience
  • Logging Best Practices Revisited [Video]

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: