微信小程序form表单组件示例代码

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

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

示例代码：

示例代码：

<form bindsubmit=\"formSubmit\" bindreset=\"formReset\">
  <view class=\"section section_gap\">
    <view class=\"section__title\">switch</view>
    <switch name=\"switch\"/>
  </view>
  <view class=\"section section_gap\">
    <view class=\"section__title\">slider</view>
    <slider name=\"slider\" show-value ></slider>
  </view>
  <view class=\"section\">
    <view class=\"section__title\">input</view>
    <input name=\"input\" placeholder=\"please input here\" />
  </view>
  <view class=\"section section_gap\">
    <view class=\"section__title\">radio</view>
    <radio-group name=\"radio-group\">
      <label><radio value=\"radio1\"/>radio1</label>
      <label><radio value=\"radio2\"/>radio2</label>
    </radio-group>
  </view>
  <view class=\"section section_gap\">
    <view class=\"section__title\">checkbox</view>
    <checkbox-group name=\"checkbox\">
      <label><checkbox value=\"checkbox1\"/>checkbox1</label>
      <label><checkbox value=\"checkbox2\"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class=\"btn-area\">
    <button formType=\"submit\">Submit</button>
    <button formType=\"reset\">Reset</button>
  </view>
</form>
Page({
 formSubmit: function(e) {
  console.log(\'form发生了submit事件，携带数据为：\', e.detail.value)
 },
 formReset: function() {
  console.log(\'form发生了reset事件\')
 }
})

以上所述是小编给大家介绍的微信小程序form表单组件示例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！