weui學習總結——1、weui表單常用標籤
阿新 • • 發佈：2019-02-05
前言：weui是一個專門用於開發手機移動web或微信的樣式庫。但是官方只提供了demo沒有提供相關文件，所以這篇部落格就當是方便以後開發而使用吧。
weui資源下載（也可以從官網下載）：
http://download.csdn.net/download/zhengyikuangge/9940737
- 手機移動web開發必須要做的兩點：1、body中加上ontouchstart，即
<body ontouchstart>...</body>；2、頁面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> - 該部落格中所描述的程式碼只需要匯入weui.css即可，例如：
<link rel="stylesheet" href="weui.css" />。 weui.css在上述weui資源中有，請自行下載。大約是在weui-1.1.2\dist\example 路徑下。也可到我的百度網盤下載，連結：http://pan.baidu.com/s/1cFAHNS 密碼：iq4d。
該部落格中的程式碼原理上只是修改了html標籤中的class而已，請大家對照效果圖和程式碼。
按鈕
效果圖如下:
普通按鈕
<a class="weui-btn weui-btn_primary" 重新整理按鈕
<a class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i></a>不可點按鈕
<a class="weui-btn weui-btn_disabled weui-btn_primary">不可點按鈕</a>小按鈕
<a class="weui-btn weui-btn_mini weui-btn_primary">按鈕</a - 注：都可以按照自己的需要改css屬性也可以，比如修改按鈕的顏色，程式碼如下：
<a class="weui-btn weui-btn_primary" style="background:yellow">普通按鈕</a>Input
效果圖如下：
單選
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>1111</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>2222</p>
</div>
<div class="weui-cell__ft">
<!-- 注意checked屬性，可以獲取checked屬性的值判斷是否被選擇 -->
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/>
<span class="weui-icon-checked"></span>
</div>
</label>
</div>
多選
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" for="s11">
<div class="weui-cell__hd">
<!-- 注意checked屬性，可以獲取checked屬性的值判斷是否被選擇 -->
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
</div>
表單內容
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">qq</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="請輸入qq號"/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="date" value=""/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">時間</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
</div>
</div>
</div>
開關
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">標題文字</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox" checked="checked"/>
</div>
</div>
文字框
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="請輸入文字"/>
</div>
</div>
</div>
文字域
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="請輸入文字" rows="3" id="textarea"></textarea>
<div class="weui-textarea-counter" id="shownumber">0/200</div>
</div>
</div>
</div>
選擇（select）
<div class="weui-cell weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微訊號</option>
<option value="2">QQ號</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">國家/地區</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">中國</option>
<option value="2">美國</option>
<option value="3">英國</option>
</select>
</div>
</div>
閱讀並同意《相關條款》
<label for="weuiAgree" class="weui-agree">
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
<span class="weui-agree__text">
閱讀並同意<a href="javascript:void(0);">《相關條款》</a>
</span>
</label>