微信小程序表单样式怎么开发

　　小编在之前就说过小程序表单的用处，但是并没有给大家具体讲述过开发教程，最近不断有朋友向小编咨询关于微信小程序表单样式的开发问题，那么今天就为大家详细讲解一下。

　　首先来看一看微信小程序表单样式实现效果图：

　　将表单内的用户输入的switch input checkbox slider radio picker 提交

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

　　属*名类型说明

　　report-submitBoolean是否返回formId用于发送小程序模板消息

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

　　bindresetEventHandle表单重置时会触发reset事件

　　示例代码：

　　switch slider

　　input radio radio1 radio2 checkbox checkbox1 checkbox2

　　SubmitReset

　　Page({ formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：', e.detail.value) }, formReset: function() { console.log('form发生了reset事件') }})

　　ss:

　　input{ padding-left: 10px; height: 44px;}.inputView{ /*边界：大小1px, 为固体，为绿色*/ border: 1px solid green; /*边界角的弧度*/ border-radius: 10px; margin-left: 5px; margin-right: 5px; margin-top: 15px;}

　　js:

　　复制代码

　　Page({ data:{ // text:"这是一个页面" }, //点击提交 listenFormSubmit:function(e){ console.log('listenFormSubmit=',e.detail.value) }, //点击重置 listenFormReser:function(e){ console.log('listenFormReser=',e.detail.value) }, //点击忘记密码 switch1Change:function(e){ console.log('switch1Change=',e.detail.value) }, //当选中某一个的时候回调小程序函数。e.detail.value：获取选中某个radio的value radioChange: function(e) { console.log('radio发生change事件，携带value值为：', e.detail.value) }})

　　这样就能开发微信小程序表单样式了，上面的教程和代码大家觉得有用吗?参照文中的内容，开发小程序表单应该还挺简单的，希望大家在使用过程中能发现微信小程序商店以及小程序表单的便利之处。

　　微信小程序表单制作是怎样的?

　　微信小程序表单组件都有哪些?都有什么用?

　　微信小程序表单隐藏如何实现?