微信小程序表单组件form怎么使用

这篇“微信小程序表单组件form怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序表单组件form怎么使用”文章吧。

微信小程序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怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。