Pines Form

Now with more Less!

Pines Form 3 now uses Less, instead of plain old CSS. This lets you customize colors, widths, margins, and more!

Simple

Pines Form uses a few easy to remember, easy to customize classes to layout your forms beautifully and logically.

Responsive

Responsive design means Pines Form looks good on any device, from the biggest widescreen monitor to the smallest smartphone. Resize your browser to see it in action.

Cross-Browser

Pines Form works in all major browsers and provides a consistent layout. It is tested thoroughly for consistency.

Semantic

There are no specific elements you must use for Pines Form. This allows you to use the most semantically correct elements (even HTML5 elements) in your design.

Unobtrusive

Pines Form's classes all start with "pf-", so there are no naming collisions with any other library. And even if there are, the classes only affect elements under a ".pf-form".

Completely Open

Pines Form is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

Most Importantly, Standards Compliant

Pines Form uses no JavaScript, and zero CSS hacks. It's 100% documented, standard CSS styles.

Pines Form is a CSS layout library for HTML and XHTML forms. It positions the elements of a form in a consistent, aesthetically pleasing, logical manner.

You can use Pines Form in your project to make your forms consistent throughout every page. Even if you're making a closed source project, you can use Pines Form. You are also free to make changes to it and adapt it to your needs.

Pines Form is not a graphically styling library. There are very few colors and no images included in Pines Form. If you like the styling of the elements on this page, you should check out Bootstrap from Twitter.

Pines Form is also not a typographical library. It doesn't make any attempt to make your fonts look good. In fact, it doesn't touch them.

The goal of Pines Form is not to make your forms pretty. The goal is to make your forms laid out logically, in an easy to follow and consistent way. Saying that, there is no reason you can't style your forms to look pretty while using Pines Form. I'd say the forms on this page are pretty damn pretty. ;-)

Layout Style

You can choose between:

Or Individually

You can toggle block layout on specific elements:

Extensive Example Form

This form is an example, and this is a description of it.

This is a test. * This is a note about something.

This is also a test. *

Try clicking these labels. * They'll put focus on the input. Fill in the .

This is completed. *
This note is over here.

Is this a test? It might just be a trick.

Is this really a test?

Yes No

Foods

What foods do you like? Hold CTRL to select multiples.

More Tests

Complex Tests

These tests require a complex grasp on reality to correctly comprehend.

Complexity is Increased Hold CTRL to select multiples.

Did you notice? * The labels in this section are aligned right.

Except this label.

This is a long complex test.

Simple Tests

This is a test. This is a note about something.

What do you think of my tests? * I won't actually be reading this, it's just an example. You can't even submit this form. It won't go anywhere.

Form With Columns

This form tests columns of elements to conserve space on wider screens. This uses Bootstrap, but any CSS grid should work. Try resizing the browser window.

1. Test Input This is a note.

2. Test Input

3. Test Input Fill in the .

4. Test Input

5. Test Input

Yes No

6. Test Input

7. Test Input

8. Test Input

In the following examples, use the checkboxes to toggle borders around each section.

IE6: The examples and the solution don't work.
IE7: The problem doesn't happen anyway.

The Problem

When a floated element goes in a field with a note present, the note will push the element down below the label.

A Label A note.

This div is floated left.

The Solution

To fix this problem, place the note inside the label element.

A Label A note.

This div is floated left.

Pines Form has been tested in the following browsers. Any issues are stated below.

Modern Browsers

Mozilla Firefox 3.0 and higher

MS Internet Explorer 8

Custom Fieldset's border displays through title.

Apple Safari 3 and higher

Not a problem with Pines Form, but when you switch to block layout then back to inline layout, some elements don't reposition correctly. If this is a problem for you, solve it by putting fields in a pf-group or pf-full-width.

Google Chrome 3.0 and higher

Note that in Chrome 15, when you focus on some fields, their div grows in height. This is caused by Bootstrap's styling, not Pines Form. Also, the Safari block layout switch bug from above.

Opera 10 and higher

In Opera 11 the inputs in the 3 column form are a little wonky. (They're too wide to fit nicely, but that's an easy fix.)

Legacy Browsers

Mozilla Firefox 1.0 (Not tested since version 1.1)

Fieldset's right border doesn't show on auto aligned forms.
Crashes due to JavaScript on this page. (i.e. Not a Pines Form problem.)

Mozilla Firefox 1.5 (Not tested since version 1.1)

Fieldset's right border doesn't show on auto aligned forms.

Mozilla Firefox 2.0 (Not tested since version 1.1)

Fieldset's right border doesn't show on auto aligned forms.

MS Internet Explorer 5.01 (Not tested since version 1.1)

Full width textarea extends too far.
jQuery UI styled form is not visible and not accessible.
Centering using the <center> workaround will center all the form's content.
Won't automatically clear content after forms without a fieldset.
Custom fieldset's border is not dotted.
Centered buttons don't work.

MS Internet Explorer 5.5 (Not tested since version 1.1)

Centering using the <center> workaround will center all the form's content.
Won't automatically clear content after forms without a fieldset.
Custom fieldset's border displays through title.
Centered buttons don't work.

MS Internet Explorer 6

Full width fields are pushed below their labels.
When custom fieldset's title is colored, all fieldsets' titles get colored.
Custom fieldset's border displays through title.
Centered buttons don't work.

Note that right-aligning labels doesn't work unless you apply pf-labels-right to its own element.

Pines Form

Using Pines Form 3.1

Now with more Less!

Simple

Responsive

Cross-Browser

Semantic

Unobtrusive

Completely Open

Most Importantly, Standards Compliant

What is Pines Form?

What is Pines Form not?

Simple Example

Simple Example Form

Extensive Example

Layout Style

Or Individually

Extensive Example Form

Foods

More Tests

jQuery UI Styling

jQuery UI Styling Form

Custom Styling

Verification Form

Without Border

Fixed Width - No Border Form

Columns

Using Floats in Fields

Browser Support