form组件是表单组件的容器组件
用于提交用户输入的

当单击

表单中form-type为submit的<button>组件时，会将表单组件中的value值进行提交
表单组件需要加上name作为key

form组件的属性只有3个

image.png

  1. index.wxml
  2. ---------------------
  3. <view>
  4. <form bindsubmit="formSubmit" bindreset="formReset">
  5.   <view >
  6.     switch<switch name="switch" />
  7.   </view>
  9.   <view>
  10.     slider<slider name="slider" show-value></slider>
  11.   </view>
  13.   <view>
  14.     input<input name="input" placeholder="再次输入一些内容" />
  15.   </view>
  17.   <view>
  18.     radio
  19.     <radio-group name="radio-group">
  20.       <label>
  21.         <radio value="radio1" />
  22.         radio1
  23.       </label>
  24.       <label>
  25.         <radio value="radio2" />
  26.         radio2
  27.       </label>
  28.     </radio-group>
  29.   </view>
  31.   <view >
  32.     checkbox
  33.     <checkbox-group name="checkbox">
  34.       <label>
  35.         <checkbox value="checkbox1" />
  36.         checkbox1
  37.       </label>
  38.       <label>
  39.         <checkbox value="checkbox2" />
  40.         checkbox2
  41.       </label>
  42.     </checkbox-group>
  43.   </view>
  45.   <view>
  46.     <button form-type="submit">Submit</button>
  47.     <button form-type="reset">Reset</button>
  48.   </view>
  50. </form>
  51. </view>
  52. ==================================================================
  53. index.js
  54. --------------
  55. Page({
  56.   formSubmit(e) {
  57.     console.log('form发生了submit事件，携带数据为：', e.detail.value)
  58.   },
  59.   formReset() {
  60.     console.log('form发生了reset事件')
  61.   }
  62. })

image.png