表单

和列表一样，每一组表单的样式类为 weui-cells，然后再添加相应类型的样式类，比如单选对应 weui-cells_radio，多选对应 weui-cells_checkbox，表单对应 weui-cells_form 等；列表内每一个条目的样式类为 weui-cell，再添加相应类型的样式类；一组表单内可有多个条目。

表单校验相关功能可使用 weui.js（点击查看相关文档）

单选 / radio

  1. <!-- 单选 -->
  2. <div class="weui-cells weui-cells_radio">
  3.     <label class="weui-cell weui-check__label" for="x11">
  4.         <div class="weui-cell__bd">
  5.             <p>单选项文字</p>
  6.         </div>
  7.         <div class="weui-cell__ft">
  8.             <input type="radio" name="radio1" class="weui-check" id="x11">
  9.             <span class="weui-icon-checked"></span>
  10.         </div>
  11.     </label>
  12.     <label class="weui-cell weui-check__label" for="x12">
  13.         <div class="weui-cell__bd">
  14.             <p>单选项文字</p>
  15.         </div>
  16.         <div class="weui-cell__ft">
  17.             <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
  18.             <span class="weui-icon-checked"></span>
  19.         </div>
  20.     </label>
  21.     <a href="#" class="weui-cell weui-cell_link">
  22.         <div class="weui-cell__bd">添加更多</div>
  23.     </a>
  24. </div>

表单 - 图1

多选 / checkbox

  1. <!-- 多选 -->
  2. <div class="weui-cells weui-cells_checkbox">
  3.     <label class="weui-cell weui-check__label" for="s11">
  4.         <div class="weui-cell__hd">
  5.             <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
  6.             <i class="weui-icon-checked"></i>
  7.         </div>
  8.         <div class="weui-cell__bd">
  9.             <p>多选项文字</p>
  10.         </div>
  11.     </label>
  12.     <label class="weui-cell weui-check__label" for="s12">
  13.         <div class="weui-cell__hd">
  14.             <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
  15.             <i class="weui-icon-checked"></i>
  16.         </div>
  17.         <div class="weui-cell__bd">
  18.             <p>多选项文字</p>
  19.         </div>
  20.     </label>
  21.     <a href="#" class="weui-cell weui-cell_link">
  22.         <div class="weui-cell__bd">添加更多</div>
  23.     </a>
  24. </div>

表单 - 图2

输入框 / input

使用输入框，注意每一组表单除了 weui-cells 类，还需要 weui-cells_form 类。

  1. <!-- 输入框 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell">
  4.         <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
  5.         <div class="weui-cell__bd">
  6.             <input class="weui-input" type="text" placeholder="占位符">
  7.         </div>
  8.     </div>
  9. </div>

注意 input 的 type 属性值可以为 text、number、email、date、time 等，属性值为 date、time 时可用来输入日期或时间，WeUI 本身本没有日期选择器和时间选择器，更多关于 input 的 type 属性值可参考这里。

表单 - 图3

带按钮的输入框 / input

带按钮的输入框的使用场景可以为用户输入手机号获取验证码等。

注意不要忘记 weui-cell_vcode 类

  1. <!-- 带按钮的输入框 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell weui-cell_vcode">
  4.         <div class="weui-cell__hd">
  5.             <label class="weui-label">手机号</label>
  6.         </div>
  7.         <div class="weui-cell__bd">
  8.             <input class="weui-input" type="tel" placeholder="请输入手机号">
  9.         </div>
  10.         <div class="weui-cell__ft">
  11.             <a href="#" class="weui-vcode-btn">获取验证码</a>
  12.         </div>
  13.     </div>
  14. </div>

表单 - 图4

带图片的输入框 / input

带图片的输入框的使用场景可以为验证码输入。

  1. <!-- 带图片的输入框 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell weui-cell_vcode">
  4.         <div class="weui-cell__hd">
  5.             <label class="weui-label">验证码</label>
  6.         </div>
  7.         <div class="weui-cell__bd">
  8.             <input class="weui-input" type="number" placeholder="请输入验证码">
  9.         </div>
  10.         <div class="weui-cell__ft">
  11.             <img class="weui-vcode-img" src="">
  12.         </div>
  13.     </div>
  14. </div>

表单 - 图5

带选择的输入框 / input & select

  1. <!-- 带选择的输入框 -->
  2. <div class="weui-cells">
  3.     <div class="weui-cell weui-cell_select weui-cell_select-before">
  4.         <div class="weui-cell__hd">
  5.             <select class="weui-select" name="">
  6.                 <option value="1">+86</option>
  7.                 <option value="2">+80</option>
  8.                 <option value="3">+84</option>
  9.                 <option value="4">+87</option>
  10.             </select>
  11.         </div>
  12.         <div class="weui-cell__bd">
  13.             <input class="weui-input" type="number" placeholder="请输入号码">
  14.         </div>
  15.     </div>
  16. </div>

表单 - 图6

警告样式的输入框 / input

警告样式用于表单验证错误时提醒用户，在出错的表单元素上添加 weui-cell_warn 类即可，此时字体会变为红色，输入框后也会出现警告样式图标。

  1. <!-- 警告样式的输入框 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell weui-cell_warn">
  4.         <div class="weui-cell__hd">
  5.             <label for="" class="weui-label">卡号</label>
  6.         </div>
  7.         <div class="weui-cell__bd">
  8.             <input class="weui-input" type="number" placeholder="请输入卡号">
  9.         </div>
  10.         <div class="weui-cell__ft">
  11.             <i class="weui-icon-warn"></i>
  12.         </div>
  13.     </div>
  14. </div>

表单 - 图7

文本框 / textarea

文本框用于输入篇幅较长的文本。

  1. <div class="weui-cells weui-cells_form">
  2.     <div class="weui-cell">
  3.         <div class="weui-cell__bd">
  4.             <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
  5.             <div class="weui-textarea-counter"><span>0</span>/200</div>
  6.         </div>
  7.     </div>
  8. </div>

注意右下角的文字计数器功能需自行实现，WeUI 仅提供样式。

表单 - 图8

开关 / radio

  1. <!-- 开关 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell weui-cell_switch">
  4.         <div class="weui-cell__bd">标题文字</div>
  5.         <div class="weui-cell__ft">
  6.             <input class="weui-switch" type="checkbox">
  7.         </div>
  8.     </div>
  9. </div>

表单 - 图9

选择 / select

选择有带标题和不带标题两种样式。

  1. <!-- 选择 -->
  2. <div class="weui-cells">
  3.     <!-- 不带标题 -->
  4.     <div class="weui-cell weui-cell_select">
  5.         <div class="weui-cell__bd">
  6.             <select class="weui-select" name="">
  7.                 <option selected="" value="1">微信号</option>
  8.                 <option value="2">QQ号</option>
  9.                 <option value="3">Email</option>
  10.             </select>
  11.         </div>
  12.     </div>
  13.     <!-- 带标题 -->
  14.     <div class="weui-cell weui-cell_select weui-cell_select-after">
  15.         <div class="weui-cell__hd">
  16.             <label for="" class="weui-label">国家/地区</label>
  17.         </div>
  18.         <div class="weui-cell__bd">
  19.             <select class="weui-select" name="">
  20.                 <option value="1">中国</option>
  21.                 <option value="2">美国</option>
  22.                 <option value="3">英国</option>
  23.             </select>
  24.         </div>
  25.     </div>
  26. </div>

表单 - 图10

底部文字和勾选框 / checkbox

使用场景为表单填写完成后用户同意服务条款的勾选框，其位于 weui-cells 之外，与列表中的底部说明文字 weui-cells__tips 位置相同。

  1. <label for="" class="weui-agree">
  2.     <input type="checkbox" class="weui-agree__checkbox">
  3.     <span class="weui-agree__text">
  4.         阅读并同意<a href="#">《相关条款》</a>
  5.     </span>
  6. </label>

样式见上图

图片上传

WeUI 仅提供样式，具体功能请根据自己的业务需求自行实现。

  1. <!-- 图片上传 -->
  2. <div class="weui-cells weui-cells_form">
  3.     <div class="weui-cell">
  4.         <div class="weui-cell__bd">
  5.             <div class="weui-uploader">
  6.                 <div class="weui-uploader__hd">
  7.                     <!-- 标题 -->
  8.                     <p class="weui-uploader__title">图片上传</p>
  9.                     <!-- 计数器样式 -->
  10.                     <div class="weui-uploader__info">0/2</div>
  11.                 </div>
  12.                 <div class="weui-uploader__bd">
  13.                     <ul class="weui-uploader__files">
  14.                         <!-- 上传成功后的样式 -->
  15.                         <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
  16.                         <!-- 上传失败后的样式 -->
  17.                         <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
  18.                             <div class="weui-uploader__file-content">
  19.                                 <i class="weui-icon-warn"></i>
  20.                             </div>
  21.                         </li>
  22.                         <!-- 正在上传的样式 -->
  23.                         <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
  24.                             <div class="weui-uploader__file-content">50%</div>
  25.                         </li>
  26.                     </ul>
  27.                     <!-- 添加图片按钮（加号） -->
  28.                     <div class="weui-uploader__input-box">
  29.                         <input class="weui-uploader__input" type="file" accept="image/*" multiple="">
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </div>
  35. </div>

表单 - 图11