CSS form design has been plaguing me for a while now in the Pines project. After searching the web for a couple days trying to find a good CSS design for HTML forms and finding only designs full of hacks/Javascript workarounds or designs too ugly and/or restrictive to be considered, I set out to design my own near flawless, flexible, featureful, standards compliant, and cross-compatible form design to suit the needs of the Pines project. Thus was born, Pines Form. Pines Form is a CSS form design
This design has been tested and works in the following browsers:
- MS Internet Explorer 5.01, 5.5, 6, 7, 8
- Mozilla Firefox 1.0, 1.5, 2.0, 3.0, 3.5, 3.6
- Apple Safari 3, 4
- Opera 8, 9, 10
- Google Chrome 2, 3, 4
All this code is licensed under the GNU AGPL, as it is part of the Pines project. Feel free to include this code in your own work, under the terms of the AGPL.
This example page will clearly demonstrate many of the features of the design.
The design begins with well-formed, meaningfull markup:
<form class="pf-form" action="formaction" method="post">
<div class="pf-element pf-heading">
<h1>Apply Here</h1>
<p>This is the first part of a several part form.</p>
</div>
<div class="pf-element">
<label>
<span class="pf-label">Name</span>
<input class="pf-field" type="text" name="name" />
</label>
</div>
<div class="pf-element">
<span class="pf-label">Position</span>
<span class="pf-note">Check all that apply.</span>
<div class="pf-group">
<label><input class="pf-field" type="checkbox" name="position[]" /> Engineer</label>
<label><input class="pf-field" type="checkbox" name="position[]" /> Research</label>
<label><input class="pf-field" type="checkbox" name="position[]" /> Sales</label>
</div>
</div>
<div class="pf-element pf-buttons">
<input class="pf-button" type="submit" name="submit" value="Submit" />
<input class="pf-button" type="reset" name="reset" value="Reset" />
</div>
</form>
This markup will create a form with a title, a description, some fields, a submit button, and a reset button. It's easy to write, easy to read, and makes sense. By wrapping the inputs and their labels in label tags, the user can click on the labels to give focus to the inputs. As you can see, Pines Form uses classes a lot. This allows you to incorporate other styled elements into Pines Forms without conflict.
The next step is to include the CSS to style the form in the <head> section of your page:
<link href="/path/to/pform.css" media="all" rel="stylesheet" type="text/css" />
And finally, you must include (using conditional comments) some styles only for Internet Explorer's various versions:
<!--[if lt IE 8]>
<link href="/path/to/pform-ie-lt-8.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 6]>
<link href="/path/to/pform-ie-lt-6.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
You can leave out any of the IE stylesheets, if you don't need to support those versions of IE.
And that's it. You now have a Pines Form. Take a look at the example page's source to see how to use many of the features and customizations available with Pines Form.
| < Prev | Next > |
|---|
Comments
try using firebug addon for firefox, it's really a great help for editing.
Your end result markup would be like this:
This is an area of the form
Name:
seo company
http://www.smart-seo.co.uk/