字節(jié)跳動小程序開發(fā)組件文檔 form

表單，將組件內的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。

當點擊 <form/> 表單中 formType 為 submit 的 <button/> 組件時，會將表單組件中的 value 值進行提交，需要在表單組件中加上 name 來作為 key。

示例

開發(fā)者工具中預覽

<view class="container">

  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch"/>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label><radio value="radio1"/>選項一</label>
          <label><radio value="radio2"/>選項二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>選項一</label>
          <label><checkbox value="checkbox2"/>選項二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value ></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</view>
        <view class="page-cells page-cells_after-title">
          <view class="page-cell page-cell_input">
            <view class="page-cell__bd">
              <input class="page-input" name="input" placeholder="這是一個輸入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button type="primary" formType="submit">提交</button>
        <button formType="reset">重設</button>
      </view>
    </form>
  </view>

</view>

Page({
  data: {
    pickerHidden: true,
    chosen: ''
  },
  pickerConfirm: function (e) {
    this.setData({
      pickerHidden: true
    })
    this.setData({
      chosen: e.detail.value
    })
  },
  pickerCancel: function (e) {
    this.setData({
      pickerHidden: true
    })
  },
  pickerShow: function (e) {
    this.setData({
      pickerHidden: false
    })
  },
  formSubmit: function (e) {
    console.log('form發(fā)生了submit事件，攜帶數據為：', e.detail.value)
  },
  formReset: function (e) {
    console.log('form發(fā)生了reset事件，攜帶數據為：', e.detail.value)
    this.setData({
      chosen: ''
    })
  }
})