表單 - 純粹 - Pure.css 繁體中文

預設表單

若要建立預設的內嵌式表單，請將 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="default-remember">
            <input type="checkbox" id="default-remember" /> Remember me
        </label>
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

堆疊表單

若要在標籤下方建立堆疊表單（輸入元素），請將 pure-form-stacked 類別名稱新增到某個 <form> 元素，並與 pure-form 並列。

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>
        <label for="stacked-email">Email</label>
        <input type="email" id="stacked-email" placeholder="Email" />
        <span class="pure-form-message">This is a required field.</span>
        <label for="stacked-password">Password</label>
        <input type="password" id="stacked-password" placeholder="Password" />
        <label for="stacked-state">State</label>
        <select id="stacked-state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>
        <label for="stacked-remember" class="pure-checkbox">
            <input type="checkbox" id="stacked-remember" /> Remember me
        </label>
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

對齊表單

若要建立一個對齊表單，請將 pure-form-aligned 類別名稱新增到某個 <form> 元素，並與 pure-form 並列。在一個對齊表單中，標籤對齊於表單輸入控制項的右方，但在較小的螢幕上會還原為堆疊表單。

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="aligned-name">Username</label>
            <input type="text" id="aligned-name" placeholder="Username" />
            <span class="pure-form-message-inline">This is a required field.</span>
        </div>
        <div class="pure-control-group">
            <label for="aligned-password">Password</label>
            <input type="password" id="aligned-password" placeholder="Password" />
        </div>
        <div class="pure-control-group">
            <label for="aligned-email">Email Address</label>
            <input type="email" id="aligned-email" placeholder="Email Address" />
        </div>
        <div class="pure-control-group">
            <label for="aligned-foo">Supercalifragilistic Label</label>
            <input type="text" id="aligned-foo" placeholder="Enter something here..." />
        </div>
        <div class="pure-controls">
            <label for="aligned-cb" class="pure-checkbox">
                <input type="checkbox" id="aligned-cb" /> I&#x27;ve read the terms and conditions
            </label>
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

多欄表單（帶有 Pure 網格）

若要建立多欄表單，請將您的表單元素放入 Pure 網格內。建立回應式多欄表單（如以下範例）需要 Pure 回應式網格出現在頁面上。

<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="multi-first-name">First Name</label>
                <input type="text" id="multi-first-name" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-last-name">Last Name</label>
                <input type="text" id="multi-last-name" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-email">E-Mail</label>
                <input type="email" id="multi-email" class="pure-u-23-24" required="" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-city">City</label>
                <input type="text" id="multi-city" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-state">State</label>
                <select id="multi-state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>
        <label for="multi-terms" class="pure-checkbox">
            <input type="checkbox" id="multi-terms" /> I&#x27;ve read the terms and conditions
        </label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

群組輸入

若要群組設定為文字為基礎的輸入元素，請將它們包在 pure-group 類別名稱的 <fieldset> 元素內。群組輸入適用於註冊表單，在行動裝置上看起來也很自然。

<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>

輸入大小

輸入元素在語法上具有流暢的寬度大小，與 Pure Grids 類似。您可以在這些元素上套用 pure-input-* 類別。

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

您可以透過將輸入元素包在網格容器中，控制輸入大小。在下方的範例中，<input> 元素有一個 pure-input-1 類別，但包在一個特定網格類別的 <div> 中。

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

必填輸入

若要將表單控制項標示為必填，請新增 required 屬性。

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

已停用的輸入

若要停用表單控制項，請新增 disabled 屬性。

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

唯讀輸入

若要讓表單輸入為唯讀，請新增 readonly 屬性。disabled 和 readonly 的差異在於唯讀輸入仍可對焦。這讓使用者可以與輸入互動並選取它的文字，而停用的控制項則不會互動。

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

圓角輸入

若要顯示圓角的表單控制項，請新增 pure-input-rounded 類別名稱。

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

核取方塊和選項按鈕

若要正規化和對齊核取方塊和選項按鈕輸入，請新增 pure-checkbox 或 pure-radio 類別名稱。

<form class="pure-form">
    <label for="checkbox-radio-option-one" class="pure-checkbox">
        <input type="checkbox" id="checkbox-radio-option-one" value="" /> Here&#x27;s option one.
    </label>
    <label for="checkbox-radio-option-two" class="pure-radio">
        <input type="radio" id="checkbox-radio-option-two" name="optionsRadios" value="option1" checked="" /> Here&#x27;s a radio button. You can choose this one..
    </label>
    <label for="checkbox-radio-option-three" class="pure-radio">
        <input type="radio" id="checkbox-radio-option-three" name="optionsRadios" value="option2" /> ..Or this one!
    </label>
</form>

表單

簡易的 HTML 表單 CSS。