微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

微信小程序 表单Form实例

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

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

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

rush:xml;">
dio单选 dio-group name="radio-group"> Box多选 Box-group name="checkBox"> 时间选择器

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

rush:xml;"> // pages/index/Component/FormM/FormM.js Page({ //初始化数据 data: { array: ['大中国','美国','巴西','小日本'],index: 0,date: '2016-12-20',time: '11:19',allValue:'' },//表单提交按钮 formSubmit: function(e) { console.log('form发生了submit事件,携带数据为:',e.detail.value) this.setData({ allValue:e.detail.value }) },//表单重置按钮 formReset: function(e) { console.log('form发生了reset事件,携带数据为:',e.detail.value) this.setData({ allValue:'' }) },//---------------------与选择器相关的方法 //地区选择 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 }) },})

效果图:

输出表单中的结果值:

源码下载:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。