qiangxiandaima/houtai/miniprogram-demo-master/miniprogram/page/weui/example/form/form.wxml

<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>

<mp-form-page title="表单结构" subtitle="展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。">
    <mp-form id="form" rules="{{rules}}" models="{{formData}}">
        <mp-cells title="单选列表项">
            <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
                <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
            </mp-checkbox-group>
        </mp-cells>
        <mp-cells title="复选列表项">
            <mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
                <mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
            </mp-checkbox-group>
        </mp-cells>

        <mp-cells title="表单" footer="底部说明文字底部说明文字">
            <mp-cell prop="name" title="姓名" ext-class="">
                <input bindinput="formInputChange" data-field="name" class="weui-input" placeholder="请输入姓名"/>
            </mp-cell>
            <mp-cell prop="qq" title="qq" ext-class="">
                <input bindinput="formInputChange" data-field="qq" class="weui-input" placeholder="请输入qq"/>
            </mp-cell>
            <mp-cell prop="mobile" title="手机号" ext-class=" weui-cell_vcode">
                <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
                <button slot="footer" type="default" class="weui-vcode-btn">获取验证码</button>
            </mp-cell>
            <mp-cell prop="date" title="日期" ext-class="">
                <picker data-field="date" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                    <view class="weui-input">{{date}}</view>
                </picker>
            </mp-cell>
            <mp-cell prop="vcode" title="验证码" ext-class=" weui-cell_vcode">
                <input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
                <image slot="footer" class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
            </mp-cell>
        </mp-cells>
        <mp-cells title="提交后表单项报错">
            <mp-cell show-error prop="idcard" title="卡号" ext-class="">
                <input bindinput="formInputChange" data-field="idcard" class="weui-input" placeholder="请输入卡号"/>
            </mp-cell>
        </mp-cells>
        <mp-cells title="开关">
            <mp-cell title="标题文字" ext-class="">
                <switch slot="footer" checked />
            </mp-cell>
        </mp-cells>
        <mp-cells title="文本框">
            <mp-cell title="标题文字" ext-class="">
                <input class="weui-input" placeholder="请输入文本" />
            </mp-cell>
        </mp-cells>
        <mp-cells title="文本域">
            <mp-cell has-header="{{false}}" has-footer="{{false}}" title="" ext-class="">
                <textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
                <view class="weui-textarea-counter">0/200</view>
            </mp-cell>
        </mp-cells>
        <mp-cells title="选择">
            <mp-cell ext-class="weui-cell_select weui-cell_select-before">
                <view slot="title" style="width: 105px">
                    <picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
                    <view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
                    </picker>
                </view>
                <input class="weui-input" placeholder="请输入号码" />
            </mp-cell>
        </mp-cells>
        <mp-cells title="选择">
            <mp-cell has-header="{{false}}" ext-class="weui-cell_select">
                <picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
                    <view class="weui-select">{{accounts[accountIndex]}}</view>
                </picker>
            </mp-cell>
            <mp-cell ext-class="weui-cell_select weui-cell_select-after">
                <view slot="title" class="weui-label">国家/地区</view>
                <picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
                    <view class="weui-select">{{countries[countryIndex]}}</view>
                </picker>
            </mp-cell>
        </mp-cells>
    </mp-form>

    <checkbox-group slot="tips" bindchange="bindAgreeChange">
        <label class="weui-agree" for="weuiAgree">
            <view class="weui-agree__text">
                <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
                <view class="weui-agree__checkbox-icon">
                    <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                </view>
                阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
            </view>
        </label>
    </checkbox-group>

    <view slot="button">
        <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
    </view>
</mp-form-page>