前言：

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。

表单：

表单整体效果图：

一：form表单选择性别

代码如下：

<div class="weui-cells weui-cells_radio"> 
   <label class="weui-cell weui-check__label" for=r1> 
        <div class="weui-cell__bd">男</div> 
	<div class="weui-cell__ft"> 
          <input required type="radio" class="weui-check" name="sex" value="male" id=r1 tips=请选择性别> 
		<span class="weui-icon-checked"></span> 
	</div> 
    </label> 
    <label class="weui-cell weui-check__label" for=r2> 
	<div class="weui-cell__bd">女</div> 
	<div class="weui-cell__ft"> 
	    <input type="radio" name="sex" class="weui-check" value="female" id=r2> 
		<span class="weui-icon-checked"></span> 
	</div> 
    </label> 
</div>

         性别单选效果图如下：

二：列表多选框

代码如下：

<div class="weui-cells weui-cells_checkbox"> 
    <label class="weui-cell weui-check__label" for=c1> 
      <div class="weui-cell__hd"> 
	<input required pattern={1,2} type=checkbox tips=请勾选1-2个敲码助手 class=weui-check name=assistance id=c1> 
	  <i class="weui-icon-checked"></i> 
      </div> 
      <div class="weui-cell__bd">张三</div> 
    </label> 
    <label class="weui-cell weui-check__label" for=c2>
      <div class="weui-cell__hd"> 
	<input type="checkbox" name="assistance" class="weui-check" id=c2> 
	   <i class="weui-icon-checked"></i>
      </div> 
      <div class="weui-cell__bd">李四</div> 
    </label> 
</div>

列表多选框效果图如下：

三：输入框

代码如下：

<div class="weui-cells weui-cells_form">
  <div class=weui-cell>
    <div class=weui-cell__hd><label class=weui-label>手机号</label></div>
    <div class=weui-cell__bd> <input class=weui-input type=tel required pattern=^\d{11}$ maxlength=11 placeholder=现在的手机号 emptytips=请输入手机号 notmatchtips=正确的手机号> </div>
    <div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
  </div>
  <div class=weui-cell>
    <div class=weui-cell__hd><label class=weui-label>身份证号码</label></div>
    <div class=weui-cell__bd> <input class=weui-input type=text required pattern=REG_IDNUM maxlength=18 placeholder=身份证号码 emptytips=身份证号码 notmatchtips=正确的身份证号码> </div>
    <div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
  </div>
  <div class="weui-cell 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 maxlength=4 type=text required pattern=REG_VCODE placeholder=点击验证码更换 tips=请输入验证码> </div>
    <div class=weui-cell__ft> <i class=weui-icon-warn></i> <img class=weui-vcode-img src=http://tencent.github.io/weui/images/vcode.jpg> </div>
  </div>
</div>

输入框效果图如下：