SciActive

  • Increase font size
  • Default font size
  • Decrease font size
Home Articles Pines Form Styles - Clean CSS Design for XHTML Forms

Pines Form Styles - Clean CSS Design for XHTML Forms

E-mail Print PDF
User Rating: / 4
PoorBest 

pines-form-exampleCSS 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.

	

Comments

avatar aubreegage
0
 
 
Yeah nowadays, css is the main factor for searching a designer. Because most of the websites today are using content mangement system and it was more equip with easy editing web 2.0 that css is a need for it.

try using firebug addon for firefox, it's really a great help for editing.
B
i
u
Quote
Code
List
List item
URL
Name *
Email (For verification & Replies)
Code   
ChronoComments by Joomla Professional Solutions
Submit Comment
Cancel
avatar JC
0
 
 
A simple model for this might be to use the following HTML tags: fieldset,legend, dl, dt, dd.... So you could simplify your CSS and markup (using exactly what you already did, but slightly updated naming).
Your end result markup would be like this:


This is an area of the form

Name:



B
i
u
Quote
Code
List
List item
URL
Name *
Email (For verification & Replies)
Code   
ChronoComments by Joomla Professional Solutions
Submit Comment
Cancel
avatar daniel.hkcs
0
 
 
What is the html code when placing multiple links on a single image?

seo company
http://www.smart-seo.co.uk/
B
i
u
Quote
Code
List
List item
URL
Name *
Email (For verification & Replies)
Code   
ChronoComments by Joomla Professional Solutions
Submit Comment
Cancel
B
i
u
Quote
Code
List
List item
URL
Name *
Email (For verification & Replies)
Code   
ChronoComments by Joomla Professional Solutions
Submit Comment
 

Newsflashes

2009-05-14
Dandelion 0.11 Alpha released. This is the second public Dandelion release.
 
2009-04-15
SciActive Forums are now available! Register for free today.
 

Advertisement