CSS form design was plaguing me for a while 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. Pines Form achieves this goal.
This design has been tested and works in the following browsers:
- MS Internet Explorer 5.01 and higher
- Mozilla Firefox 1.0 and higher
- Apple Safari 3 and higher
- Opera 8 and higher
- Google Chrome 2 and higher
It can be used in your own web project. Pines Form is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.
This example page will clearly demonstrate many of the features of the design.
Pines Forms begin with well-formed, meaningfull markup, such as:
<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 class="pf-required">*</span></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" value="Submit" />
<input class="pf-button" type="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 your page. This is usually placed in the head tag.
<link href="/path/to/pform.css" media="all" rel="stylesheet" type="text/css" />
And finally, you may include, using conditional comments, some styles for Internet Explorer's various versions. If you don't need support for these IE versions, you can leave out the corresponding stylesheet.
<!--[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]-->
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:
[div]
[span class="info"]This kind of looks like HTML. :)[/span]
[/div]