form

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

属性名	类型	说明
report-submit	Boolean	是否返回formId用于发送模板消息
bindsubmit	EventHandle	携带form中的数据触发submit事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	EventHandle	表单重置时会触发reset事件

<view class="page">

  <view class="page__hd">

    <text class="page__title">form</text>

    <text class="page__desc">表单</text>

  </view>

<form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">

    <view class="section section_gap">

        <view class="section__title">switch</view>

        <switch name="switch" />

    </view>

    <view class="section section_gap">

        <view class="section__title">slider</view>

        <slider value="50" name="slider" show-value />

    </view>

    <view class="section">

        <view class="section__title">input</view>

        <input name="input" placeholder="please input here" />

    </view>

    <view class="section section_gap">

        <view class="section__title">readio</view>

        <radio-group name="radio-group">

            <label><radio value="radio1" />radio1</label>

            <label><radio value="radio2" />radio2</label>

        </radio-group>

    </view>

    <view class="section section_gap">

        <view class="section__title">checkbox</view>

        <checkbox-group name="radio-group">

            <label><checkbox value="radio1" />checkbox1</label>

            <label><checkbox value="radio2" />checkbox2</label>

        </checkbox-group>

    </view>

    <view class="btn-area">

        <button formType="submit">Submit</button>

        <button formType="reset">Reset</button>

    </view>

  </form>

</view>

 

Page({

    data:{

 

    },

    formSubmit : function (e) {

    console.log('form发生了submit事件,携带数据:',e.detail.value)

    },

    formReset : function (e) {

    console.log('form发生了reset事件,携带数据:',e.detail.value)

    }

})