二、表单
1.按钮
基础属性：
weui-btn weui-btn_primary 确定按钮（绿色）
weui-btn weui-btn_warn 警告按钮（红色）
weui-btn weui-btn_default 默认按钮（淡灰）
扩展：
weui-btn_disabled 禁止按钮
weui-btn_plain-xxxx 镂空按钮
weui-btn_mini 小型按钮
weui-btn_loading 刷新按钮
2.单选列表
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11"><!--使用label标签包裹文字和选项达到关联效果-->
<div class="weui-cell__bd">
<p>这是一个单选列表</p>
</div>
<div class="weui-cell__ft">
<!--name属性的值相同是单选列表相关联的关键-->
<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>这是一个单选列表</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>
3.多选列表
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" for="s11"><!--使用label标签包裹文字和选项达到关联效果-->
<div class="weui-cell__hd">
<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>这是一个多选列表</p>
</div>
</label>
<label class="weui-cell weui-check__label" for="s12"><!--使用label标签包裹文字和选项达到关联效果-->
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s12"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>这是一个多选列表</p>
</div>
</label>
</div>
4.输入框
一行两列：
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">请输入</label></div>
<div class="weui-cell__bd">
<!--pattern="[0-9]*"表示只能输入数字-->
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入一串数字" />
</div>
</div>
一行三列：
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号" />
</div>
<div class="weui-cell__ft">
<button class="weui-vcode-btn">获取验证码</button>
</div>
</div>
5.开关
基本语法：
<input class="weui-switch" type="checkbox" />
兼容IE版本:
<label for="switchCP" class="weui-switch-cp">
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
<div class="weui-switch-cp__box"></div>
</label>
6.选择结构
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">这是一个选择列表1</option>
<option value="2">这是一个选择列表2</option>
<option value="3">这是一个选择列表3</option>
<option value="4">这是一个选择列表4</option>
</select>
</div>
7.滑块
<div class="weui-slider-box">
<div class="weui-slider">
<div id="sliderInner" class="weui-slider__inner">
<div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
<div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div id="sliderValue" class="weui-slider-box__value">50</div>
</div>
8.上传图片
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
</div>
</div>
</div>