• 表单
    • 单选 / radio
    • 多选 / checkbox
    • 输入框 / input
    • 带按钮的输入框 / input
    • 带图片的输入框 / input
    • 带选择的输入框 / input & select
    • 警告样式的输入框 / input
    • 文本框 / textarea
    • 开关 / radio
    • 选择 / select
    • 底部文字和勾选框 / checkbox
    • 图片上传

    表单

    和列表一样，每一组表单的样式类为 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