PForm - Pixel Perfect Forms
PForm is a pixel perfect CSS form layout library.
See http://sciactive.com/pform/ for examples.
Installation
You can install PForm with NPM, Composer or Bower.
npm install pform
composer require sciactive/pform
bower install https://github.com/sciactive/pform.git
Getting Started
PForm comes with the following files:
pform.css
- The main stylesheet.pform-bootstrap.css
- Use this if you also use Bootstrap.pform-ie-lt-8.css
- Use this to support Internet Explorer 6 and 7.pform-ie-lt-6.css
- Use this to support Internet Explorer 5.01 and 5.5.
So here's how you'd include them all:
<!-- Include this file if you are using Bootstrap. --><!--[if lt IE 8]><link href="pform-ie-lt-8.css" media="all" rel="stylesheet" type="text/css" /><![endif]--><!--[if lt IE 6]><link href="pform-ie-lt-6.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->
Notice the conditional comments to serve older versions of IE the right files. If you have to support older versions of IE, PForm can do it.
Now you can use PForm like this:
Login Username Password Remember Me Lasts for 2 weeks.
Here's the same form, built with a fieldset:
Login Username Password Remember Me Lasts for 2 weeks.
Features
Layouts
PForm has two different layout options, Inline (default) and Block. To use block layout for an entire form, add the pf-layout-block
class to the pf-form
element. To use block layout for an individual element, add the pf-layout-block
class to a pf-element
element.
Headings
Sign Up Now You will receive 200 bonus points just for signing up!
Required Asterisk
*
You can also mark the element as completed (with JavaScript validation) by adding the pf-completed
class, like so:
*
The best place I've found to put these is right after a label's text, like this:
Username *
You can put the pf-completed
class on the pf-element
element instead, to mark any required asterisks in that element as completed.
Field Groups
Sometimes you will need to group fields so they don't fall left below the label. You can do this by wrapping them in a pf-group
element:
Favorite Food Hot Dogs Hamburgers Cheeseburgers Sushi Pizza ...
Remember that you can use the pf-group
class on a span instead. This lets you put a group inside a label element and have it validate.
Fieldset Groups
Fieldset groups must use the pf-group
class:
Household Household Memebers Family members living in your house.
Label Alignment
Labels can be aligned left (default) or right. To align them, use the pf-labels-left
and pf-labels-right
classes. You can put these classes on a pf-form
element, pf-group
fieldset, pf-element
element, or pf-label
element. You can override an ancestor's alignment class too.
Full Width Elements
Elements can be extended to the form's width using the pf-full-width
class:
Comments
Verification Forms
You can apply a form like layout to verification pages by simply providing no inputs:
Verify this Information Name Jake Sully Location This will not be displayed to visitors. Pandora. Species N/A Correct Make Changes