form

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

示例代码：

<!--pages/component/pages/form/form.mcml-->
<view class="container">
  <view class="statement">表单。将组件内的 input、textarea、checkbox、slider、radio、picker、switch提交。</view>
  <form id="a" bindsubmit="bindsubmit" bindreset="bindreset">
      <view>
      input:
      <input name="input" placeholder="请输入内容"></input>
      </view>
      <view>
      textarea:
      <textarea name="textarea" placeholder="请输入多行内容"></textarea>
      </view>
      <view>
      radio-group:
      <radio-group name="radio-group">
        <radio value="radio1">radio1</radio>
        <radio value="radio2">radio2</radio>
        <radio value="radio3">radio3</radio>
      </radio-group>
      </view>
      <view>
      checkbox-group:
      <checkbox-group name="checkbox-group">
        <checkbox value="checkbox1">checkbox1</checkbox>
        <checkbox value="checkbox2">checkbox2</checkbox>
      </checkbox-group>
      </view>
      <view>
      switch:
      <switch name="switch"></switch>
      </view>
      <view>
      picker:
      <picker bindchange="pickerchange" value="{{picker}}" name="picker" mode="date">{{picker}}</picker>
      </view>
      <view>
      picker-view:
      <picker-view name="pickerView" style="height:300rpx;">
        <picker-view-column>
          <view>a</view>
          <view>b</view>
          <view>c</view>
          <view>d</view>
        </picker-view-column>
        <picker-view-column>
          <view>1</view>
          <view>2</view>
          <view>3</view>
          <view>4</view>
        </picker-view-column>
      </picker-view>
      </view>
      <view>
      slider:
      <slider value="23" name="slider"></slider>
      </view>
      <view>
      </view>
      <view>
        <button id="submit-button" form-type="submit" type="primary">submit</button>
        <button id="reset-button" form-type="reset">reset</button>
      </view>
  </form>
  <view>bindsubmit:form事件, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{submitDetail}}</text>
  <view>bindreset:form事件, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{resetDetail}}</text>
</view>

// pages/component/pages/form/form.js
Page({
  data: {
    picker : '2020-01-01',
    values: ''
  },
  pickerchange: function(e){
    this.setData({
      picker: e.detail.value
    })
  },
  bindsubmit: function(e){
    this.setData({
      submitDetail: JSON.stringify(e, null, 2)
    })
  },
  bindreset: function(e){
    this.setData({
      resetDetail: JSON.stringify(e, null, 2)
    })
  }
})