微信小程序 表单Form实例详解(附源码)

前端之家收集整理的这篇文章主要介绍了微信小程序 表单Form实例详解(附源码)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 表单Form实例

表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用

form表单,将组件内输入的"switch","input","checkBox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件的值。其主要属性

主要代码,创建一个form表单:

dio单选 dio-group name="radio-group"> Box多选 Box-group name="checkBox">

如何获取form内部的控件的值,就需要用到form的相关属性代码如下

方法 //地区选择 bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为',e.detail.value) this.setData({ index: e.detail.value }) },//日期选择 bindDateChange: function(e) { this.setData({ date: e.detail.value }) },//时间选择 bindTimeChange: function(e) { this.setData({ time: e.detail.value }) },})

效果图:

输出表单中的结果值:

源码下载:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/43276.html

猜你在找的微信小程序相关文章