[TOC]
## 表单 form
### 命令表单项
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-order ui-border-b">
<a href="#">清空消息列表</a>
</div>
<div class="ui-form-item ui-form-item-order ui-border-b">
<a href="#">清空所有聊天记录</a>
</div>
<div class="ui-form-item ui-form-item-order ui-border-b">
<a href="#">清空缓存数据</a>
</div>
</form>
</div>
~~~
### 表单展示项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b">
<label for="#">账号</label>
<input type="text" value="421205351" readonly>
</div>
<div class="ui-form-item ui-form-item-show ui-border-b">
<label for="#">身份证号码</label>
<input type="text" value="445331199401055317">
</div>
</form>
</div>
~~~
### 链接表单项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-link ui-border-b">
<a href="#">展示链接</a>
</div>
<div class="ui-form-item ui-form-item-link ui-border-b">
<a href="#">展示链接</a>
</div>
<div class="ui-form-item ui-form-item-link ui-border-b">
<a href="#">展示链接</a>
</div>
</form>
</div>
~~~
### 表单输入项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-border-b">
<label>
身份证号码
</label>
<input type="text" placeholder="18位身份证号码">
<a href="#" class="ui-icon-close">
</a>
</div>
<div class="ui-form-item ui-form-item-textarea ui-border-b">
<label>
详细地址
</label>
<textarea placeholder="街道等详细地址"></textarea>
</div>
<div class="ui-form-item ui-form-item-l ui-border-b">
<label class="ui-border-r">
中国 +86
</label>
<input type="text" placeholder="请输入手机号码">
<a href="#" class="ui-icon-close">
</a>
</div>
</form>
</div>
~~~
### 表单输入项3
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-pure ui-border-b">
<input type="text" placeholder="QQ号/手机号/邮箱">
<a href="#" class="ui-icon-close"></a>
</div>
<div class="ui-form-item ui-form-item-pure ui-border-b">
<input type="password" placeholder="密码">
<a href="#" class="ui-icon-close"></a>
</div>
<div class="ui-form-item ui-form-item-r ui-border-b">
<input type="text" placeholder="请输入验证码">
<!-- 若按钮不可点击则添加 disabled 类 -->
<button type="button" class="ui-border-l">重新发送</button>
<a href="#" class="ui-icon-close"></a>
</div>
</form>
</div>
~~~
### 表单开关项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-switch ui-border-b">
<p>
对附近的人可见
</p>
<label class="ui-switch">
<input type="checkbox">
</label>
</div>
<div class="ui-form-item ui-form-item-switch ui-border-b">
<p>
对附近的人可见
</p>
<label class="ui-switch">
<input type="checkbox" checked>
</label>
</div>
</form>
</div>
~~~
### 表单下拉框
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-border-b">
<label>日期</label>
<div class="ui-select-group">
<div class="ui-select">
<select>
<option>2014</option>
<option selected>2015</option>
<option>2016</option>
</select>
</div>
<div class="ui-select">
<select>
<option>03</option>
<option selected>04</option>
<option>05</option>
</select>
</div>
<div class="ui-select">
<select>
<option>21</option>
<option selected>22</option>
<option>23</option>
</select>
</div>
</div>
</div>
<div class="ui-form-item ui-border-b">
<label>日期</label>
<div class="ui-select">
<select>
<option>2014</option>
<option selected>2015</option>
<option>2016</option>
</select>
</div>
</div>
</form>
</div>
~~~
### 表单单选项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-radio ui-border-b">
<label class="ui-radio" for="radio">
<input type="radio" name="radio">
</label>
<p>表单中用于单选操作</p>
</div>
<div class="ui-form-item ui-form-item-radio ui-border-b">
<label class="ui-radio" for="radio">
<input type="radio" checked name="radio">
</label>
<p>表单中用于单选操作</p>
</div>
</form>
</div>
~~~
### 表单多选项,普通列表中多选项
* * * * *
~~~
<div class="ui-form ui-border-t">
<form action="#">
<div class="ui-form-item ui-form-item-checkbox ui-border-b">
<label class="ui-checkbox">
<input type="checkbox">
</label>
<p>表单中用于多选操作</p>
</div>
<div class="ui-form-item ui-form-item-checkbox ui-border-b">
<label class="ui-checkbox">
<input type="checkbox" checked>
</label>
<p>表单中用于多选操作</p>
</div>
</form>
<ul class="ui-list ui-list-text ui-list-checkbox ui-border-b">
<li class="ui-border-t">
<label class="ui-checkbox">
<input type="checkbox">
</label>
<p>普通列表ui-list中用于多选操作</p>
</li>
<li class="ui-border-t">
<label class="ui-checkbox">
<input type="checkbox" checked>
</label>
<p>普通列表中用于多选操作</p>
</li>
</ul>
</div>
~~~
### 多选框
* * * * *
~~~
<p>
<label class="ui-checkbox-s">
<input type="checkbox" name="checkbox" checked>
</label>
我已阅读并同意
</p>
<p>
<label class="ui-checkbox-s">
<input type="checkbox" name="checkbox" checked>
</label>
我已阅读并同意
</p>
~~~
### 普通列表中单选项
* * * * *
~~~
<ul class="ui-list ui-list-text ui-list-radio ui-border-tb">
<li class="ui-border-t">
<label class="ui-radio" for="radio">
<input type="radio" name="radio">
</label>
<p>普通列表中用于单选操作</p>
</li>
<li class="ui-border-t">
<label class="ui-radio" for="radio">
<input type="radio" checked name="radio">
</label>
<p>普通列表中用于单选操作</p>
</li>
</ul>
~~~
### 普通输入框
* * * * *
~~~
<section class="ui-input-wrap ui-border-t">
<div class="ui-input ui-border-radius">
<input type="text" name="" value="" placeholder="我也说一句...">
</div>
<button class="ui-btn">评论</button>
</section>
~~~
