PForm

Pixel perfect CSS form layouts.

Download Source PForm on GitHub GitHub Icon

LESS Powered

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

Cross-Browser

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

Old Browsers

PForm is 100% documented, standard CSS styles that are supported in even very old browsers. Your forms will look good even if your customers are using a potato to view them.

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.

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.

Completely Open

PForm is distributed under the Apache 2 license.

What is PForm?

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.

What isn't PForm?

PForm is not a graphical styling library. There are very few colors and no images included in PForm. (This page is styled with Bootstrap.)

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

 

Simple Example Form


Extensive Example

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.

Is this really a test?

Foods

What's your favorite food? Your answer will determine your eligibility for spaaaaaaaaaace.












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.
Simple Tests

Custom Styling

Custom Styling Form

This form is custom styled!

Verification Form

Verify this Information
Mary had a little... This is not optional! Lamb.
Whose fleece was white as... Baking soda.
Everywhere that Mary went... The lamb was Abe Vigoda.

Without Border

Fixed Width - No Border Form

This form has fixed width elements and no border.

Watch out for lions around the submit button.
Lion.

Columns

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.

5. Test Input
6. Test Input

Using Floats in Fields

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.
The Solution

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

A Label A note.

Comments

comments powered by Disqus