響應式佈局框架 Pure-CSS 5.0 示例中文版-中

8. 表單 Form

在 form 標籤中添加 .pure-form 類，可生成單行表單（inline）

效果圖：

 

代碼：

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

 

在 form 標籤中添加 .pure-form-stacked 類，可生成棧型表單

效果圖：

 

代碼：

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

 

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

在 form 標籤中添加 .pure-form-aligned 類，可生成排型表單

效果圖：

 

代碼：

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

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

 

經過與響應式網格（responsive-grids）結合，可生成多列表單

效果圖：

 

代碼：

<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" type="text">

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="last-name">Last Name</label>

                <input id="last-name" type="text">

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="email">E-Mail</label>

                <input id="email" type="email" required>

            </div>

 

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="city">City</label>

                <input id="city" 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>

 

經過對 fieldset 增長 .pure-group 類， 可對元素分組

效果圖：

 

代碼：

<form class="pure-form">

    <fieldsetclass="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="Another Group">

        <input type="text" class="pure-input-1-2" placeholder="More Stuff">

    </fieldset>

 

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

</form>

控制表單元素大小，能夠經過增長 .pure-input-* 類實現，如 pure-input-2-3 表明寬度爲 66.6%

 

爲輸入項增長 required 屬性，使其具備必填提示

<input type="email" placeholder="Requires an email"required>

 

爲輸入項增長 disabled 屬性，使其不可用

<input type="text" placeholder="Disabled input here..."disabled>

 

爲輸入項增長 readonly 屬性，使其只讀

<input type="text" value="Readonly input here..."readonly>

 

爲輸入項增長pure-input-rounded 屬性，使其變圓角

<input type="text" class="pure-input-rounded">

 

複選框（checkbox）和單選框（radio），增長 .pure-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>

 

9. 按鈕

在 a 或 button 標籤中添加類 .pure-button

 

<aclass="pure-button" href="#">A Pure Button</a>

<buttonclass="pure-button">A Pure Button</button>

 

禁用的按鈕 Disabled Button

 

<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>

<button class="pure-button pure-button-disabled">A Disabled Button</button>

 

激活的按鈕 Active Button，同按下狀態

 

<a class="pure-button pure-button-active" href="#">An Active Button</a>

<button class="pure-button pure-button-active">An Active Button</button>

 

高亮按鈕 Primary Button

 

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>

<button class="pure-button pure-button-primary">A Primary Button</button>

 

自定義按鈕

 

<div>

    <style scoped>

 

        .button-success,

        .button-error,

        .button-warning,

        .button-secondary {

            color: white;

            border-radius: 4px;

            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

        }

 

        .button-success {

            background: rgb(28, 184, 65); /* this is a green */

        }

 

        .button-error {

            background: rgb(202, 60, 60); /* this is a maroon */

        }

 

        .button-warning {

            background: rgb(223, 117, 20); /* this is an orange */

        }

 

        .button-secondary {

            background: rgb(66, 184, 221); /* this is a light blue */

        }

 

    </style>

 

    <button class="button-success pure-button">Success Button</button>

    <button class="button-error pure-button">Error Button</button>

    <button class="button-warning pure-button">Warning Button</button>

    <button class="button-secondary pure-button">Secondary Button</button>

</div>

 

按鈕大小

 

<div>

    <style scoped>

 

        .button-xsmall {

            font-size: 70%;

        }

 

        .button-small {

            font-size: 85%;

        }

 

        .button-large {

            font-size: 110%;

        }

 

        .button-xlarge {

            font-size: 125%;

        }

 

    </style>

 

    <button class="button-xsmall pure-button">Extra Small Button</button>

    <button class="button-small pure-button">Small Button</button>

    <button class="pure-button">Regular Button</button>

    <button class="button-large pure-button">Large Button</button>

    <button class="button-xlarge pure-button">Extra Large Button</button>

</div>

 

圖標按鈕

要使用圖標按鈕，需添加 CSS 字體文件，好比 Font-Awesome 

 

 

<button class="pure-button">

    <i class="fa fa-cog"></i>

    Settings

</button>

 

<a class="pure-button" href="#">

    <i class="fa fa-shopping-cart fa-lg"></i>

    Checkout

</a>