本篇文章将介绍小程序的基础组件——表单组件。

表单组件分为11个组件:

• button
• checkbox
• form
• input
• label
• picker——普通选择器，时间选择器，日期选择器，默认是普通选择器
• picker-view——嵌入页面的滚动选择器
• radio
• slider——滑动选择器
• switch
• textarea

 表单

<div class="weui-cell weui-cell_vcode">
  <div class="weui-cell__hd">
    <label class="weui-label">手机号</label>
</div>
   <div class="weui-cell__bd">
    <input type="tel" class="weui-input" placeholder="请输入手机号"/>
  </div>
 <div class="weui-cell__ft">
<button class="weui-vcode-btn">获取验证码</button>
</div>
</div>
<div class="weui-cell">
  <div class="weui-cell__hd">
   <label for class="weui-label">日期</label>
</div>
  <div class="weui-cell__bd">
   <input type="date" 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 type="number" class="weui-input" placeholder="请输入验证码"/>
    </div>
 <div class="weui-cell__ft">
   <img class="weui-vcode-img" src="img/vcode.jpg"/>
</div>
</div>
</div>

开关

<div class="weui-cells__title">开关</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">兼容IE Edge的版本</div>
  <div class="weui-cell__ft">
   <label for="switchCP" class="weui-switch-cp">
<input type="checkbox" class="weui-switch-cp__input" id="switchCP" checked="checked"/>
  <div class="weui-switch-cp__box"></div>
</label>
				</div>
			</div>
		</div>	

选择

<div class="weui-cells__title">选择</div>
  <div class="weui-cells">
   <div class="weui-cell weui-cell_select weui-cell_select-before">
	<div class="weui-cell__hd">
	  <select class="weui-select" name="select2">
		<option value="1">86</option>
		<option value="2">80</option>
		<option value="3">84</option>
		<option value="4">87</option>
	</select>
   </div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*"placeholder="请输入号码" />
	</div>
    </div>
</div>
<div class="weui-cells__title">选择</div>
    <div class="weui-cells">
	<div class="weui-cell weui-cell_select">
	  <div class="weui-cell__bd">
	     <select class="weui-select" name="select1">
		<option selected  value="1">微信号</option>
		<option selected  value="2">QQ号</option>
		<option selected  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>
</div>
  <label for="weuiAgree" class="weui-agree">
   <input type="checkbox"  id="weuiAgree" class="weui-agree__checkbox" />
	<span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a></span>
	</label>
<div class="weui-btn-area">
   <a href="javascript:" class="weui-btn weui-btn_primary" id="showTooltips">确定</a>
  </div>