今天我们继续学习weui框架，今天我们要介绍的是weui框架里的表单，九宫格，单选多选列表项。

表单是我们常见的，在我们的微信上也是常常见到的。那我们下面就来说说吧！

表单：

表单里的input分类为俩种，一种是输入类型，另一种是选择类型，在weui框架中这倆种都要配合Cell 组件配合使用。下面我们来看看示例代码：

<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 class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
        </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 for="" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="date" value=""/>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" value="" placeholder=""/>
        </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="number" placeholder="请输入验证码"/>
        </div>
        <div class="weui-cell__ft">
            <img class="weui-vcode-img" src="./images/vcode.jpg" />
        </div>
    </div>
</div>

示例代码如上，下面我们来看看效果图：

                                                                                                   效果图如上，这就是我们常见的表单，里面包括了输入型和选择型，代码就不一一介绍了，大家可以多多使用检查看看这些类都有些什么样式就知道是如何实现的了。

九宫格：

九宫格呢也是非常常见，比如我们微信钱包里很多都是使用九宫格布局的，我们来看看示例代码：

<div class="weui-grids">
    <a href="javascript:;" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            Button
        </p>
    </a>
    <a href="javascript:;" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui-grid__label">
            Cell
        </p>
    </a>
</div>

当然九宫格不一定非得放九个，示例代码只放了俩个，如果需要九个的只需要把a标签里的内容同样复制几个就好了，下面我们来看看九宫格效果图：                                                                                                                                                                                                               效果图如上，是不是觉得在微信钱包中里经常见到。包含功能的图标和简洁的文字描述。里面的几个类呢主要就是一些布局的样式，大家可以多看一下样式是如何做到的。

单选多选列表项：

单选多选列表项也是属于我们表单中的。下面我们来看看示例代码：

<div class="weui-cells__title">单选列表项</div>
<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="x11">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="x12">

        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <a href="javascript:void(0);" class="weui-cell weui-cell_link">
        <div class="weui-cell__bd">添加更多</div>
    </a>
</div>
<div class="weui-cells__title">复选列表项</div>
<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is dealt for u.</p>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="s12">
        <div class="weui-cell__hd">
            <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is dealicient for u.</p>
        </div>
    </label>
    <a href="javascript:void(0);" class="weui-cell weui-cell_link">
        <div class="weui-cell__bd">添加更多</div>
    </a>
</div>

列表项我们在微信上也常常见到，比如阅读投票或是选择付款方式等。下面来看看效果图：

                                                                                                    效果图如上，因为背景都是白色，所以看起来没那么好。weUI框架的组件呢，说的没那么多，大致都是学习下他的这个整体布局和样式。读千篇也不如手写一篇，各位看官多多实践操作一下。今天的介绍就到这里了，后续持续更新，希望能给阅读文章的你带来收益，以上纯属个人观点，如有错误欢迎指正，谢谢大家！