响应式布局框架 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>