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


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

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





  

    

      属性名

      类型

      说明

    

  

  

    

      report-submit

      Boolean

      是否返回formId用于发送模板消息

    

    

      bindsubmit

      EventHandle

      携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }

    

    

      bindreset

      EventHandle

      表单重置时会触发reset事件

    

  





示例代码：

示例代码：





<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表单组件示例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！