README

PForm是一个像素完美的CSS表单布局库。

安装

您可以使用NPM、Composer或Bower安装PForm。

npm install pform

composer require sciactive/pform

bower install https://github.com/sciactive/pform.git

入门指南

PForm包含以下文件

pform.css - 主要样式表。
pform-bootstrap.css - 如果您还使用Bootstrap，请使用此样式表。
pform-ie-lt-8.css - 使用此样式表以支持Internet Explorer 6和7。
pform-ie-lt-6.css - 使用此样式表以支持Internet Explorer 5.01和5.5。

以下是如何包含所有这些文件的示例

<link href="pform.css" media="all" rel="stylesheet" type="text/css" />
<!-- Include this file if you are using Bootstrap. -->
<link href="pform-bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!--[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]-->

注意条件注释，用于为旧版本的IE服务正确的文件。如果您必须支持旧版本的IE，PForm可以做到。

现在您可以使用PForm如下

<form class="pf-form" action="#" method="post">
  <div class="pf-element pf-heading">
    <h3>Login</h3>
  </div>
  <div class="pf-element">
    <label><span class="pf-label">Username</span>
      <input class="pf-field" type="text" name="username" /></label>
  </div>
  <div class="pf-element">
    <label><span class="pf-label">Password</span>
      <input class="pf-field" type="password" name="password" /></label>
  </div>
  <div class="pf-element">
    <label><span class="pf-label">Remember Me</span>
      <span class="pf-note">Lasts for 2 weeks.</span>
      <input class="pf-field" type="checkbox" name="remember" /></label>
  </div>
  <div class="pf-element pf-buttons">
    <input class="pf-button" type="submit" name="submit" value="Submit" />
    <input class="pf-button" type="reset" name="reset" value="Reset" />
  </div>
</form>

这是同一个表单，使用fieldset构建

<form class="pf-form" action="#" method="post">
  <fieldset>
    <legend>Login</legend>
    <div class="pf-element">
      <label><span class="pf-label">Username</span>
        <input class="pf-field" type="text" name="username" /></label>
    </div>
    <div class="pf-element">
      <label><span class="pf-label">Password</span>
        <input class="pf-field" type="password" name="password" /></label>
    </div>
    <div class="pf-element">
      <label><span class="pf-label">Remember Me</span>
        <span class="pf-note">Lasts for 2 weeks.</span>
        <input class="pf-field" type="checkbox" name="remember" /></label>
    </div>
    <div class="pf-element pf-buttons">
      <input class="pf-button" type="submit" name="submit" value="Submit" />
      <input class="pf-button" type="reset" name="reset" value="Reset" />
    </div>
  </fieldset>
</form>

功能

布局

PForm有两个不同的布局选项，内联（默认）和块。要为整个表单使用块布局，请将pf-layout-block类添加到pf-form元素中。要为单个元素使用块布局，请将pf-layout-block类添加到pf-element元素中。

标题

<div class="pf-element pf-heading">
  <h3>Sign Up Now</h3>
  <p>You will receive 200 bonus points just for signing up!</p>
</div>

必填星号

<span class="pf-required">*</span>

您还可以通过添加pf-completed类（如下所示）将元素标记为已完成（使用JavaScript验证）

<span class="pf-required pf-completed">*</span>

最佳位置是将这些元素放在标签文本之后，如下所示

<span class="pf-label">Username <span class="pf-required">*</span></span>

您还可以将pf-completed类放在pf-element元素上，以标记该元素中的任何必填星号已完成。

字段组

有时您需要将字段分组，以免它们在标签下方偏左。您可以通过将它们包裹在pf-group元素中来实现这一点

<div class="pf-element">
  <span class="pf-label">Favorite Food</span>
  <div class="pf-group">
    <label><input class="pf-field" type="radio" name="radiotest" /> Hot Dogs</label><br />
    <label><input class="pf-field" type="radio" name="radiotest" /> Hamburgers</label><br />
    <label><input class="pf-field" type="radio" name="radiotest" /> Cheeseburgers</label><br />
    <label><input class="pf-field" type="radio" name="radiotest" /> Sushi</label><br />
    <label><input class="pf-field" type="radio" name="radiotest" /> Pizza</label><br />
    ...
  </div>
</div>

请记住，您还可以在span上使用pf-group类。这允许您在标签元素内部放置一个组并使其通过验证。

字段集组

字段集组必须使用pf-group类

<fieldset class="pf-group">
  <legend>Household</legend>
  <div class="pf-element">
    <label><span class="pf-label">Household Memebers</span>
      <span class="pf-note">Family members living in your house.</span>
      <input class="pf-field" type="text" name="household" /></label>
  </div>
</fieldset>

标签对齐

标签可以左对齐（默认）或右对齐。要对齐它们，请使用pf-labels-left和pf-labels-right类。您可以将这些类放在pf-form元素、pf-group字段集、pf-element元素或pf-label元素上。您还可以覆盖祖先的对齐类。

全宽元素

您可以使用pf-full-width类将元素扩展到表单的宽度

<div class="pf-element pf-full-width">
  <label>
    <span class="pf-label">Comments</span>
    <span class="pf-group">
      <span class="pf-field"><textarea style="width: 100%;" name="comments" rows="5" cols="30"></textarea></span>
    </span>
  </label>
</div>

验证表单

您可以通过简单地提供没有输入来将表单布局应用到验证页面上

<form class="pf-form" action="#" method="post">
  <fieldset>
    <legend>Verify this Information</legend>
    <div class="pf-element">
      <span class="pf-label">Name</span>
      <span class="pf-field">Jake Sully</span>
    </div>
    <div class="pf-element">
      <span class="pf-label">Location</span>
      <span class="pf-note">This will not be displayed to visitors.</span>
      <span class="pf-field">Pandora.</span>
    </div>
    <div class="pf-element">
      <span class="pf-label">Species</span>
      <span class="pf-field">N/A</span>
    </div>
    <div class="pf-element pf-buttons">
      <button class="pf-button" type="submit" name="submit">Correct</button>
      <button class="pf-button" type="button" name="changes">Make Changes</button>
    </div>
  </fieldset>
</form>

sciactive / pform

维护者

详细信息