form

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

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性名类型默认值说明
bindsubmitEventHandle携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , target: ''}
bindresetEventHandle表单重置时会触发 reset 事件

示例

  2. <view class="container">
  4.   <view class="page-body">
  5.     <form catchsubmit="formSubmit" catchreset="formReset">
  6.       <view class="page-section page-section-gap">
  7.         <view class="page-section-title">switch</view>
  8.         <switch name="switch"/>
  9.       </view>
  11.       <view class="page-section page-section-gap">
  12.         <view class="page-section-title">radio</view>
  13.         <radio-group name="radio">
  14.           <label><radio value="radio1"/>选项一</label>
  15.           <label><radio value="radio2"/>选项二</label>
  16.         </radio-group>
  17.       </view>
  19.       <view class="page-section page-section-gap">
  20.         <view class="page-section-title">checkbox</view>
  21.         <checkbox-group name="checkbox">
  22.           <label><checkbox value="checkbox1"/>选项一</label>
  23.           <label><checkbox value="checkbox2"/>选项二</label>
  24.         </checkbox-group>
  25.       </view>
  27.       <view class="page-section page-section-gap">
  28.         <view class="page-section-title">slider</view>
  29.         <slider value="50" name="slider" show-value ></slider>
  30.       </view>
  32.       <view class="page-section">
  33.         <view class="page-section-title">input</view>
  34.         <view class="page-cells page-cells_after-title">
  35.           <view class="page-cell page-cell_input">
  36.             <view class="page-cell__bd">
  37.               <input class="page-input" name="input" placeholder="这是一个输入框" />
  38.             </view>
  39.           </view>
  40.         </view>
  41.       </view>
  43.       <view class="btn-area">
  44.         <button type="primary" formType="submit">提交</button>
  45.         <button formType="reset">重设</button>
  46.       </view>
  47.     </form>
  48.   </view>
  50. </view>
  1. Page({
  2.   data: {
  3.     pickerHidden: true,
  4.     chosen: ''
  5.   },
  6.   pickerConfirm: function (e) {
  7.     this.setData({
  8.       pickerHidden: true
  9.     })
  10.     this.setData({
  11.       chosen: e.detail.value
  12.     })
  13.   },
  14.   pickerCancel: function (e) {
  15.     this.setData({
  16.       pickerHidden: true
  17.     })
  18.   },
  19.   pickerShow: function (e) {
  20.     this.setData({
  21.       pickerHidden: false
  22.     })
  23.   },
  24.   formSubmit: function (e) {
  25.     console.log('form发生了submit事件，携带数据为：', e.detail.value)
  26.   },
  27.   formReset: function (e) {
  28.     console.log('form发生了reset事件，携带数据为：', e.detail.value)
  29.     this.setData({
  30.       chosen: ''
  31.     })
  32.   }
  33. })

form - 图1

原文: https://developer.toutiao.com/docs/comp/form.html