按钮

普通按钮

<a href="javascript:;" class="weui-btn weui-btn_primary">主要的</a>

加载按钮

<a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i></a>

禁用按钮

<a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_disabled">禁用按钮</a>

mini按钮

<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">mini按钮</a>

单选按钮

注意checked属性，可以获取checked属性的值判断是否被选择

<div class="weui-cells weui-cells_radio">
	<label class="weui-cell weui-check__label" for="men">
		<div class="weui-cell__bd">
			<p>男</p>
		</div>
		<div class="weui-cell__ft">
		        <input name="sex" id="men" type="radio" class="weui-check" checked="checked"/>
			<span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell weui-check__label" for="women">
		<div class="weui-cell__bd">
			<p>女</p>
		</div>
		<div class="weui-cell__ft">
			<input name="sex" id="women" type="radio" class="weui-check"/>
			<span class="weui-icon-checked"></span>
		</div>
	</label>
</div>

复选框

注意checked属性，可以获取checked属性的值判断是否被选择

<div class="weui-cells weui-cells_checkbox">
	<label class="weui-cell weui-check__label" for="s1">
		<div class="weui-cell__hd">
			<input type="checkbox" id="s1"  class="weui-check" 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="s2">
		<div class="weui-cell__hd">
			<input type="checkbox" id="s2"  class="weui-check"/>
			<i class="weui-icon-checked"></i>
		</div>
		<div class="weui-cell__bd">
			<p>玩游戏</p>
		</div>
	</label>
	<label class="weui-cell weui-check__label" for="s3">
		<div class="weui-cell__hd">
			<input type="checkbox"  id="s3" class="weui-check"/>
			<span class="weui-icon-checked"></span>
		</div>
		<div class="weui-cell__bd">
			<p>睡觉</p>
		</div>
	</label>
	<a href="javascript:;" class="weui-cell weui-cell_link">
		<div class="weui-cell__bd">更多</div>
	</a>
</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 type="number" placeholder="请输入QQ号" class="weui-input" pattern="/^\d+$/" />
		</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">
			<a href="javascript:;" class="weui-vcode-btn">获取验证码</a>
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd">
			<label class="weui-label">日期</label>
		</div>
		<div class="weui-cell__bd">
			<input type="date" class="weui-input" />
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd">
			<label class="weui-label">时间</label>
		</div>
		<div class="weui-cell__bd">
			<input type="datetime-local" class="weui-input" />
		</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" placeholder="请输入验证码" />
		</div>
		<div class="weui-cell__ft">
			<img src="example/images/vcode.jpg" class="weui-vcode-img" />
		</div>
	</div>
</div>
<div class="weui-cells__tips">底部说明</div>
<div class="weui-cells weui-cells_form">
	<div class="weui-cell weui-cell_warn">
		<div class="weui-cell__hd">
			<label class="weui-label">卡号</label>
		</div>
		<div class="weui-cell__bd">
		   <input type="number" class="weui-input" pattern="/^\d+$/" placeholder="请输入银行卡号" />
		</div>
		<div class="weui-cell__ft">
			<i class="weui-icon-warn"></i>
		</div>
	</div>
</div>

开关

<div class="weui-cells weui-cells_form">
	<div class="weui-cell weui-cell_switch">
		<div class="weui-cell__bd">夜间模式</div>
		<div class="weui-cell__ft">
			<input type="checkbox" class="weui-switch" />
		</div>
	</div>
	<div class="weui-cell weui-cell_switch">
		<div class="weui-cell__bd">护眼模式</div>
		<div class="weui-cell__ft">
			<input type="checkbox" class="weui-switch" checked="checked" />
		</div>
	</div>
</div>

文本框，多行文本域

<div class="weui-cells">
	<div class="weui-cell">
		<div class="weui-cell__bd">
			<input class="weui-input" 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"></textarea>
			<div class="weui-textarea-counter"><span>0</span>/200</div>
		</div>
	</div>
</div>

select下拉选择框

<div class="weui-cell weui-cell_select weui-cell_select-before">
	<div class="weui-cell__hd">
		<select name="select" class="weui-select">
			<option value="1">+86</option>
			<option value="2">+80</option>
			<option value="3">+84</option>
			<option value="3">+87</option>
		</select>
        </div>
	<div class="weui-cell__bd">
		<input class="weui-input" type="number" placeholder="请输入号码" />
	</div>
</div>

<div class="weui-cell weui-cell_select">
	<div class="weui-cell__bd">
		<select class="weui-select" name="select1">
			<option selected="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>