{"id":13552977,"url":"https://github.com/sciactive/pform","last_synced_at":"2026-03-04T01:05:59.616Z","repository":{"id":3037330,"uuid":"4057938","full_name":"sciactive/pform","owner":"sciactive","description":"The PForm CSS design.","archived":false,"fork":false,"pushed_at":"2023-03-01T10:26:22.000Z","size":757,"stargazers_count":21,"open_issues_count":2,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-24T09:49:12.050Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sciactive.com/pform/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sciactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2012-04-17T22:33:29.000Z","updated_at":"2021-11-04T03:49:01.000Z","dependencies_parsed_at":"2023-07-05T17:00:16.102Z","dependency_job_id":null,"html_url":"https://github.com/sciactive/pform","commit_stats":{"total_commits":38,"total_committers":1,"mean_commits":38.0,"dds":0.0,"last_synced_commit":"47bad48d13705e7fd1b4ee4f5af910c92f34cc94"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sciactive%2Fpform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sciactive%2Fpform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sciactive%2Fpform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sciactive%2Fpform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sciactive","download_url":"https://codeload.github.com/sciactive/pform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939192,"owners_count":20857916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:02:14.479Z","updated_at":"2026-03-04T01:05:54.574Z","avatar_url":"https://github.com/sciactive.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# PForm - Pixel Perfect Forms\n\n[![Latest NPM Version](https://img.shields.io/npm/v/pform.svg?style=flat)](https://www.npmjs.com/package/pform) [![Latest Packagist Version](https://img.shields.io/packagist/v/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![License](https://img.shields.io/packagist/l/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![Open Issues](https://img.shields.io/github/issues/sciactive/pform.svg?style=flat)](https://github.com/sciactive/pform/issues)\n\nPForm is a pixel perfect CSS form layout library.\n\nSee http://sciactive.com/pform/ for examples.\n\n## Installation\n\nYou can install PForm with NPM, Composer or Bower.\n\n```sh\nnpm install pform\n```\n\n```sh\ncomposer require sciactive/pform\n```\n\n```sh\nbower install https://github.com/sciactive/pform.git\n```\n\n## Getting Started\n\nPForm comes with the following files:\n\n* `pform.css` - The main stylesheet.\n* `pform-bootstrap.css` - Use this if you also use Bootstrap.\n* `pform-ie-lt-8.css` - Use this to support Internet Explorer 6 and 7.\n* `pform-ie-lt-6.css` - Use this to support Internet Explorer 5.01 and 5.5.\n\nSo here's how you'd include them all:\n\n```html\n\u003clink href=\"pform.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c!-- Include this file if you are using Bootstrap. --\u003e\n\u003clink href=\"pform-bootstrap.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c!--[if lt IE 8]\u003e\n\u003clink href=\"pform-ie-lt-8.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c![endif]--\u003e\n\u003c!--[if lt IE 6]\u003e\n\u003clink href=\"pform-ie-lt-6.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c![endif]--\u003e\n```\n\nNotice 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.\n\nNow you can use PForm like this:\n\n```html\n\u003cform class=\"pf-form\" action=\"#\" method=\"post\"\u003e\n  \u003cdiv class=\"pf-element pf-heading\"\u003e\n    \u003ch3\u003eLogin\u003c/h3\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"pf-element\"\u003e\n    \u003clabel\u003e\u003cspan class=\"pf-label\"\u003eUsername\u003c/span\u003e\n      \u003cinput class=\"pf-field\" type=\"text\" name=\"username\" /\u003e\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"pf-element\"\u003e\n    \u003clabel\u003e\u003cspan class=\"pf-label\"\u003ePassword\u003c/span\u003e\n      \u003cinput class=\"pf-field\" type=\"password\" name=\"password\" /\u003e\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"pf-element\"\u003e\n    \u003clabel\u003e\u003cspan class=\"pf-label\"\u003eRemember Me\u003c/span\u003e\n      \u003cspan class=\"pf-note\"\u003eLasts for 2 weeks.\u003c/span\u003e\n      \u003cinput class=\"pf-field\" type=\"checkbox\" name=\"remember\" /\u003e\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"pf-element pf-buttons\"\u003e\n    \u003cinput class=\"pf-button\" type=\"submit\" name=\"submit\" value=\"Submit\" /\u003e\n    \u003cinput class=\"pf-button\" type=\"reset\" name=\"reset\" value=\"Reset\" /\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nHere's the same form, built with a fieldset:\n\n```html\n\u003cform class=\"pf-form\" action=\"#\" method=\"post\"\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003eLogin\u003c/legend\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003clabel\u003e\u003cspan class=\"pf-label\"\u003eUsername\u003c/span\u003e\n        \u003cinput class=\"pf-field\" type=\"text\" name=\"username\" /\u003e\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003clabel\u003e\u003cspan class=\"pf-label\"\u003ePassword\u003c/span\u003e\n        \u003cinput class=\"pf-field\" type=\"password\" name=\"password\" /\u003e\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003clabel\u003e\u003cspan class=\"pf-label\"\u003eRemember Me\u003c/span\u003e\n        \u003cspan class=\"pf-note\"\u003eLasts for 2 weeks.\u003c/span\u003e\n        \u003cinput class=\"pf-field\" type=\"checkbox\" name=\"remember\" /\u003e\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element pf-buttons\"\u003e\n      \u003cinput class=\"pf-button\" type=\"submit\" name=\"submit\" value=\"Submit\" /\u003e\n      \u003cinput class=\"pf-button\" type=\"reset\" name=\"reset\" value=\"Reset\" /\u003e\n    \u003c/div\u003e\n  \u003c/fieldset\u003e\n\u003c/form\u003e\n```\n\n## Features\n\n### Layouts\n\nPForm 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.\n\n### Headings\n\n```html\n\u003cdiv class=\"pf-element pf-heading\"\u003e\n  \u003ch3\u003eSign Up Now\u003c/h3\u003e\n  \u003cp\u003eYou will receive 200 bonus points just for signing up!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Required Asterisk\n\n```html\n\u003cspan class=\"pf-required\"\u003e*\u003c/span\u003e\n```\n\nYou can also mark the element as completed (with JavaScript validation) by adding the `pf-completed` class, like so:\n\n```html\n\u003cspan class=\"pf-required pf-completed\"\u003e*\u003c/span\u003e\n```\n\nThe best place I've found to put these is right after a label's text, like this:\n\n```html\n\u003cspan class=\"pf-label\"\u003eUsername \u003cspan class=\"pf-required\"\u003e*\u003c/span\u003e\u003c/span\u003e\n```\n\nYou can put the `pf-completed` class on the `pf-element` element instead, to mark any required asterisks in that element as completed.\n\n### Field Groups\n\nSometimes 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:\n\n```html\n\u003cdiv class=\"pf-element\"\u003e\n  \u003cspan class=\"pf-label\"\u003eFavorite Food\u003c/span\u003e\n  \u003cdiv class=\"pf-group\"\u003e\n    \u003clabel\u003e\u003cinput class=\"pf-field\" type=\"radio\" name=\"radiotest\" /\u003e Hot Dogs\u003c/label\u003e\u003cbr /\u003e\n    \u003clabel\u003e\u003cinput class=\"pf-field\" type=\"radio\" name=\"radiotest\" /\u003e Hamburgers\u003c/label\u003e\u003cbr /\u003e\n    \u003clabel\u003e\u003cinput class=\"pf-field\" type=\"radio\" name=\"radiotest\" /\u003e Cheeseburgers\u003c/label\u003e\u003cbr /\u003e\n    \u003clabel\u003e\u003cinput class=\"pf-field\" type=\"radio\" name=\"radiotest\" /\u003e Sushi\u003c/label\u003e\u003cbr /\u003e\n    \u003clabel\u003e\u003cinput class=\"pf-field\" type=\"radio\" name=\"radiotest\" /\u003e Pizza\u003c/label\u003e\u003cbr /\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n*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.*\n\n### Fieldset Groups\n\nFieldset groups must use the `pf-group` class:\n\n```html\n\u003cfieldset class=\"pf-group\"\u003e\n  \u003clegend\u003eHousehold\u003c/legend\u003e\n  \u003cdiv class=\"pf-element\"\u003e\n    \u003clabel\u003e\u003cspan class=\"pf-label\"\u003eHousehold Memebers\u003c/span\u003e\n      \u003cspan class=\"pf-note\"\u003eFamily members living in your house.\u003c/span\u003e\n      \u003cinput class=\"pf-field\" type=\"text\" name=\"household\" /\u003e\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/fieldset\u003e\n```\n\n### Label Alignment\n\nLabels 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.\n\n### Full Width Elements\n\nElements can be extended to the form's width using the `pf-full-width` class:\n\n```html\n\u003cdiv class=\"pf-element pf-full-width\"\u003e\n  \u003clabel\u003e\n    \u003cspan class=\"pf-label\"\u003eComments\u003c/span\u003e\n    \u003cspan class=\"pf-group\"\u003e\n      \u003cspan class=\"pf-field\"\u003e\u003ctextarea style=\"width: 100%;\" name=\"comments\" rows=\"5\" cols=\"30\"\u003e\u003c/textarea\u003e\u003c/span\u003e\n    \u003c/span\u003e\n  \u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Verification Forms\n\nYou can apply a form like layout to verification pages by simply providing no inputs:\n\n```html\n\u003cform class=\"pf-form\" action=\"#\" method=\"post\"\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003eVerify this Information\u003c/legend\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003cspan class=\"pf-label\"\u003eName\u003c/span\u003e\n      \u003cspan class=\"pf-field\"\u003eJake Sully\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003cspan class=\"pf-label\"\u003eLocation\u003c/span\u003e\n      \u003cspan class=\"pf-note\"\u003eThis will not be displayed to visitors.\u003c/span\u003e\n      \u003cspan class=\"pf-field\"\u003ePandora.\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element\"\u003e\n      \u003cspan class=\"pf-label\"\u003eSpecies\u003c/span\u003e\n      \u003cspan class=\"pf-field\"\u003eN/A\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"pf-element pf-buttons\"\u003e\n      \u003cbutton class=\"pf-button\" type=\"submit\" name=\"submit\"\u003eCorrect\u003c/button\u003e\n      \u003cbutton class=\"pf-button\" type=\"button\" name=\"changes\"\u003eMake Changes\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/fieldset\u003e\n\u003c/form\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsciactive%2Fpform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsciactive%2Fpform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsciactive%2Fpform/lists"}