默认表单
给<form>加个pure-form就可以创建默认的单行表单。
<form class="pure-form">
<fieldset>
<legend>一个简单的单行表单</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> 记住我
</label>
<button type="submit" class="pure-button pure-button-primary">登录</button>
</fieldset>
</form>堆叠式
加了class pure-form后，再加个class pure-form-stacked可实现如下效果：
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>堆叠式表单</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>标签加默认class pure-form ，然后再加 pure-form-aligned 。对齐式表单，label显示在input的左边，但是屏幕缩小以后就跟上面堆叠式表单显示一样了，可以缩放浏览器试试。
<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>多列式 (配合栅格)
表单元素放入单元格就可以形成多列的效果。
<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>input分组
标签<fieldset>加class pure-group 然后把input包起来，可实现分组的效果，适合注册表单，在移动端也挺好看。.
<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 大小
Input 元素大小设置跟栅格系统类似，添加class：pure-input-*就可以了。
<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>
你可以通过栅格系统进一步控制input大小。下面的例子 <input> 虽然有pure-input-1 但是被栅格 <div> 包起来了。
<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>必填的 Inputs
添加 required 属性，标识必填的required。
<form class="pure-form">
<input type="email" placeholder="Requires an email" required>
</form>禁用输入框 Disabled Inputs
添加 disabled 属性，禁止输入。
<form class="pure-form">
<input type="text" placeholder="Disabled input here..." disabled>
</form>只读 Inputs
添加 readonly 属性，input不能输入，但是可以复制。
<form class="pure-form">
<input type="text" value="Readonly input here..." readonly>
</form>圆角 Inputs
添加class pure-input-rounded 可实现圆角效果。
<form class="pure-form">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">Search</button>
</form>复选Checkboxes 和 单选Radios
添加class pure-checkbox 或 pure-radio 可使checkbox、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>