PForm

LESS Powered

PForm 3 uses Less, instead of plain CSS. This lets you customize colors, widths, margins, and more!

Responsive

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

Cross-Browser

PForm 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 PForm. This allows you to use the most semantically correct elements (inluding HTML5 elements) in your design.

Completely Open

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

Standards Compliant

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

PForm is a CSS layout library for forms. It positions the elements of a form in a consistent manner.

You can use PForm in your project to make your forms consistent. Even if you're making a closed source project.

PForm is not a graphical styling library. There are very few colors and no images included in PForm. If you like the styling of the elements on this page, you can use Bootstrap from Twitter.

PForm is also not a typographical library. It doesn't change your fonts.

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.

PForm 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 PForm, 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 PForm. 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 PForm 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.

PForm

LESS Powered

Responsive

Cross-Browser

Semantic

Completely Open

Standards Compliant

What is PForm?

What isn't PForm?

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