微信小程序form组件

表单

将组件内的用户输入的      提交

主要属性：

效果图：

Paste_Image.png

form.wxml添加代码：

  







 

 

  

 

 

 

 

 

 

 

 

 管理员

 

 

 老师

 

 

 学生

 

 

 

 

 

 忘记密码?

 

 

 

 提交

 重置

form.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)

 }

})

form.wxss添加代码：

.input{

 padding-left: 10px;

 height: 44px;

}

.inputView{

 /*边界：大小1px, 为固体，为绿色*/

 border: 1px solid green;

 /*边界角的弧度*/

 border-radius: 10px;

 margin-left: 5px;

 margin-right: 5px;

 margin-top: 15px;

}

注意：
form表单组件 是提交form内的所有选中属性的值，
注意每个form表单内的组件都必须有name属性指定否则提交不上去，
button中的type两个submit，reset属性分别对应form的两个事件

来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2506&extra=page%3D2