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 on my own to design a near flawless, flexible, featureful, standards compliant, and cross-compatible form design to suit the needs of the Pines project. I have accomplished my goal, and want to share my work with others so they can benefit from it. This design has been tested and works in the following browsers:
- Internet Explorer 5.01
- Internet Explorer 5.5
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8
- Firefox 1.0
- Firefox 1.5
- Firefox 2.0
- Firefox 3.0
- Firefox 3.5
- Safari 3
- Safari 4
- Opera 8
- Opera 9
- Opera 10
- Google Chrome 2
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="pform" action="" method="post">
<div class="element heading"><h1>Apply Here</h1></div>
<div class="element">
<label><span class="label">Name</span>
<input class="field" type="text" name="name" /></label>
</div>
<div class="element buttons">
<input class="button" type="submit" name="submit" value="Submit" />
</div>
</form>
This markup will create a form with a title "Apply Here", a field "Name", and a submit button. It's easy to write, easy to read, and makes sense. By wrapping the input box's label in a label tag, the user can click on the label to give focus to the input box. As you can see, Pines Forms use classes a lot. This allows the developer to incorporate other styled elements into their forms without conflict. For example, Pines' newsletter component uses a Yahoo YUI edit box in its form.
The next step is to include the CSS to style the form:
.pform:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.pform fieldset {
padding: 5.6px 10px 12px;
border: 1px solid #CCC;
overflow: auto; /* Opera 8 won't enclose floated divs without this. */
}
.pform fieldset legend, .pform .heading h1 {
font-size: 150%;
font-weight: normal;
}
.pform fieldset.group {
display: block;
clear: left;
margin-bottom: 15px;
}
.pform div.element {
float: left;
clear: left;
padding-bottom: 15px;
}
.pform div.heading {
border-bottom: 1px solid #CCC;
padding-bottom: 0;
margin-bottom: 10px;
width: 100%;
}
.pform div.heading h1 {
margin-top: 5px;
margin-bottom: 5px;
}
.pform div.heading p {
clear: left;
margin-top: 5px;
margin-bottom: 5px;
}
.pform div.element .label, .pform div.element .note {
width: 230px; /* Width of labels. */
float: left;
}
.pform div.element .note {
clear: left;
font-size: 60%;
color: #555;
}
.pform div.element .group {
margin-left: 230px; /* Same as width of labels. */
}
.pform div.element .field, .pform div.buttons .button {
float: none;
margin-left: 5px; /* Margin between inputs and labels. */
}
.pform div.buttons {
clear: both;
padding-left: 215px; /* Width of labels + margin to inputs - button spacing. */
}
.pform div.buttons .button {
margin-left: 20px; /* Button spacing. */
}
And finally, we must include some styles only for Internet Explorer's various versions:
/* Required for IE 7 and lower. */
.pform {
overflow: hidden; /* Hides an extended border. */
height: 100%; /* Makes IE6 enclose floats. */
}
.pform fieldset {
overflow: visible; /* IE7 will show scrollbars without this. */
}
.pform div.element {
width: 100%; /* Positions the inputs correctly. */
}
.pform div.buttons {
width: 550px; /* Keeps IE's broken box model from pushing the button box out of the form. Increase or decrease if needed. */
}
/* Required for IE 5.5 and lower. */
.pform {
height: auto; /* Undoes our IE6 fix from above. */
clear: left; /* Fixes forms aligning right of floated elements. */
}
You can do this with conditional comments, like this:
<!--[if lt IE 8]>
<style type="text/css">
/* Required for IE 7 and lower. */
.pform {
overflow: hidden; /* Hides an extended border. */
height: 100%; /* Makes IE6 enclose floats. */
}
.pform fieldset {
overflow: visible; /* IE7 will show scrollbars without this. */
}
.pform div.element {
width: 100%; /* Positions the inputs correctly. */
}
.pform div.buttons {
width: 550px; /* Keeps IE's broken box model from pushing the button box out of the form. Increase or decrease if needed. */
}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
/* Required for IE 5.5 and lower. */
.pform {
height: auto; /* Undoes our IE6 fix from above. */
clear: left; /* Fixes forms aligning right of floated elements. */
}
</style>
<![endif]-->
And that's it. You now have a Pines style form. Take a look at the example page's source to see how to use many of the features and customizations available with Pines Forms.
| < Prev | Next > |
|---|
Comments
try using firebug addon for firefox, it's really a great help for editing.