Pure形式（Form）

HTML表單的簡單CSS。

Default Form

要創(chuàng)建默認(rèn)內(nèi)聯(lián)表單，請將pure-form該類名添加到任何<form>元素。

<form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>

        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

Stacked Form

要在標(biāo)簽下創(chuàng)建一個(gè)帶有輸入元素的堆疊表單，請將pure-form-stacked類名添加到<form>元素旁邊pure-form。

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
        <span class="pure-form-message">This is a required field.</span>

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="state">State</label>
        <select id="state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>

        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

Aligned Form

要創(chuàng)建一個(gè)對齊的表單，請將pure-form-aligned類名添加到<form>元素旁邊pure-form。以對齊的形式，標(biāo)簽與表單輸入控件對齊，但較小的屏幕恢復(fù)為堆疊形式。

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
            <span class="pure-form-message-inline">This is a required field.</span>
        </div>

        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>

        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

Multi-Column Form (with Pure Grids)

要創(chuàng)建多列表單，請將您的表單元素包含在純網(wǎng)格中。創(chuàng)建響應(yīng)式多列表單（如下面的示例）要求Pure Response網(wǎng)格存在于頁面上。

Legend

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>

        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" class="pure-u-23-24" type="email" required>
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">City</label>
                <input id="city" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>

        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

Grouped Inputs

要對一組基于文本的輸入元素進(jìn)行分組，請將它們包裝在<fieldset>帶有pure-group類名的元素中。分組輸入在注冊表單上工作良好，在移動設(shè)備上看起來很自然。

<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username">
        <input type="text" class="pure-input-1-2" placeholder="Password">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>

    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="A title">
        <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
    </fieldset>

    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

Input Sizing

輸入元素具有類似于純網(wǎng)格的語法中的流體寬度大小。您可以將pure-input-*類應(yīng)用于這些元素。

<form class="pure-form">
    <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
    <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
    <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
    <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
    <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
 </form>

您可以通過將它們包裝在網(wǎng)格容器中來進(jìn)一步控制輸入尺寸。在下面的示例中，<input>元素有一個(gè)pure-input-1類，但是<div>用特定的網(wǎng)格類包裝。

<form class="pure-form pure-g">
    <div class="pure-u-1-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
    </div>
    <div class="pure-u-3-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
    </div>

    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>
    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>

    <div class="pure-u-1-8">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
    </div>
    <div class="pure-u-1-8">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
    </div>
    <div class="pure-u-1-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
    </div>
    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>

    <div class="pure-u-1-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
    </div>
    <div class="pure-u-2-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
    </div>
    <div class="pure-u-2-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
    </div>

    <div class="pure-u-1">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1">
    </div>
</form>

Required Inputs

要根據(jù)需要標(biāo)記表單控件，請?zhí)砑觬equired屬性。

<form class="pure-form">
    <input type="email" placeholder="Requires an email" required>
</form>

Disabled Inputs

要禁用表單控件，請?zhí)砑釉揹isabled屬性。

<form class="pure-form">
    <input type="text" placeholder="Disabled input here..." disabled>
</form>

Read-Only Inputs

要使表單輸入為只讀，請?zhí)砑觬eadonly屬性。之間的差異disabled和readonly是只讀的投入仍然可獲得焦點(diǎn)。這允許人們與輸入交互并選擇其文本，而禁用的控件不是交互式的。

<form class="pure-form">
    <input type="text" value="Readonly input here..." readonly>
</form>

Rounded Inputs

要顯示帶有圓角的窗體控件，請?zhí)砑觩ure-input-rounded類名。

<form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
</form>

Checkboxes and Radios

要對復(fù)選框和無線電輸入進(jìn)行歸一化和對齊，請?zhí)砑觩ure-checkbox或分類名稱pure-radio。

<form class="pure-form">
    <label for="option-one" class="pure-checkbox">
        <input id="option-one" type="checkbox" value="">
        Here's option one.
    </label>

    <label for="option-two" class="pure-radio">
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        Here's a radio button. You can choose this one..
    </label>

    <label for="option-three" class="pure-radio">
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>