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