微信小程序常用表单控件

感谢慕课网七月老师课程
!–如何一次性获取所有表单控件的值并且提交到服务器上去呢？
–from表单提交
使用form把所有子元素包含进去

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

开关控件

<switch name="switch" type="switch" checked="{{false}}" color="red" bindchange="onBindChange" />

–滑动组件–

 <slider  name="slider" min="0" max="500" value="36" name="slider" show-value="ture" step="3" bindchange="onSliderChange"> </slider>

–radio单选组件–

  <radio-group name="radio-group" bindchange="onRadioChange">    <label>      <radio value="战士" checked="ture" checked="ture" />战士    </label>    <label>      <radio value="法师" checked="{{flase}}" />法师    </label>    <label>      <radio value="牧师" checked="{{flase}}" />牧师    </label>  </radio-group>

–多选组件checkbox–

<checkbox-group name="checkbox-group"  bindchange="onCheckBoxChange">    <label>      <checkbox value="椒盐排骨" />椒盐排骨    </label>    <label>      <checkbox value="泡椒凤爪" />泡椒凤爪    </label>    <label>      <checkbox value="四喜丸子" />四喜丸子    </label>    <label>      <checkbox value="青椒脆骨" />青椒脆骨    </label>    <label>      <checkbox value="莲藕排骨汤" />莲藕排骨汤    </label>  </checkbox-group>

–添加button组件，获取form点击事件-

  <button form-type="submit">Submit提交</button>  <button form-type="reset">Reset重置</button></form>

注意：所有的表单控件在form内都要设置name属性，否则form无法获取该表单的值`这里写代码片

js文件代码

Page({  data: {  },  onBindChange: function (event) {    console.log(event.detail.value);  },  onSliderChange: function (event) {    console.log(event.detail.value);  },  onRadioChange: function (event) {    console.log(event.detail.value);  },  onCheckBoxChange: function (event) {    console.log(event.detail.value);  },  formSubmit: function (event) {    console.log('form发生了提交事件，携带数据为：', event.detail.value)  },  formReset: function (event) {    console.log('form发生了reset重置事件，携带数据为：', event.detail.value);  }})