当前位置：首页 > 微信 > 正文

微信小程序组件解读和分析：九、form表单

form表单组件说明:
表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

 

form表单组件用法：
重置:<button formType="reset">Reset</button>


form表单组件示例代码运行效果如下：

技术分享



提交: <button formType="submit">Submit</button>



技术分享

 

下面是WXML代码：

 

[XML]  纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
< view class = "page" >
   < view class = "page__hd" >
     < text class = "page__title" >表单控件</ text >
   </ view >
   < form class = "page__bd" catchsubmit = "formSubmit" catchreset = "formReset" >
     < view class = "section" >
       < view class = "section__title" >您的姓名：</ view >
       < input name = "name" placeholder = "姓名：" />
     </ view >
     < view class = "section section_gap" >
       < view class = "section__title" >性别：</ view >
       < radio-group name = "gender" >
         < label >< radio value = "男" />男</ label >
         < label >< radio value = "女" />女</ label >
         < label >< radio value = "其他" />其他</ label >
       </ radio-group >
     </ view >
     < view class = "section section_gap" >
       < view class = "section__title" >年龄：</ view >
       < slider value = "18" name = "age" show-value ></ slider >
     </ view >
     < view class = "section section_gap" >
       < view class = "section__title" >擅长的开发语言：</ view >
       < checkbox-group name = "technology" >
         < label >< checkbox value = "Java" />Java</ label >
         < label >< checkbox value = "JavaScript" />JavaScript</ label >
         < label >< checkbox value = "C++" />C++</ label >
         < label >< checkbox value = "C" />C</ label >
         < label >< checkbox value = "Object-C" />Object-C</ label >
         < label >< checkbox value = "C#" />C#</ label >
         < label >< checkbox value = "Python" />;Python</ label >
         < label >< checkbox value = "PHP" />;PHP</ label >
         < label >< checkbox value = "Ruby" />Ruby</ label >
         < label >< checkbox value = "Swift" />Swift</ label >
       </ checkbox-group >
     </ view >
     < view class = "section section_gap" >
       < view class = "section__title" >是否公开信息：</ view >
       < switch name = "isPublic" />
     </ view >
     < view class = "btn-area" >
       < button formType = "submit" >Submit</ button >
       < button formType = "reset" >Reset</ button >
     </ view >
     < modal class = "modal" hidden = "{{modalHidden}}" no-cancel bindconfirm = "modalChange" >
       < view > 您填写的表单如下 </ view >
       < view > 姓名:{{name}} </ view >
       < view > 性别：{{gender}} </ view >
       < view > 年龄：{{age}} </ view >
       < view > 擅长的开发语言：{{technology}} </ view >
       < view > 是否公开信息：{{isPublic}} </ view >
     </ modal >
   </ form >
</ view >



下面是JS代码：
[JavaScript]  纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Page({
   data: {
     pickerHidden: true ,
     chosen: ‘‘ ,
     modalHidden: true ,
     name: ‘‘ ,
     gender: ‘‘ ,
     age: ‘‘ ,
     technology: ‘‘ ,
     isPublic: ‘‘
   },
   formSubmit: function (e) {
     var value =  e.detail.value;
     this .setData(
       {
         modalHidden: false ,
         name: value.name,
         gender: value.gender,
         age: value.age,
         technology: value.technology,
         isPublic: value.isPublic
       }
     );
     console.log( ‘form发生了submit事件，携带数据为：‘ , e.detail.value)
   },
   formReset: function (e) {
     console.log( ‘form发生了reset事件，携带数据为：‘ , e.detail.value)
     this .setData({
       chosen: ‘‘
     })
   },
   modalChange: function (e) {
     this .setData({
       modalHidden: true
     })
   },
})




下面是WXSS代码：

[CSS]  纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
wx-label {
   display : block ;
   margin-top : 10 rpx;
   margin-left : 15 rpx;
}
.section__title{
   font-size : 30 rpx;
   margin-bottom : 30 rpx;
   font-weight : bold ;
}
.page {
     min-height : 100% ;
     flex: 1 ;
     background-color : #FBF9FE ;
     font-size : 32 rpx;
     font-family : -apple-system-font, Helvetica Neue, Helvetica , sans-serif ;
     overflow : hidden ;
}
.page__hd{
     padding : 50 rpx 50 rpx 100 rpx 50 rpx;
     text-align : center ;
}
.page__title{
     display : inline- block ;
     padding : 20 rpx 40 rpx;
     font-size : 32 rpx;
     color : #AAAAAA ;
     border-bottom : 1px solid #CCCCCC ;
}
.page__desc{
     display : none ;
     margin-top : 20 rpx;
     font-size : 26 rpx;
     color : #BBBBBB ;
}
.section{
     margin-bottom : 80 rpx;
}
.section_gap{
     padding : 0 30 rpx;
}
.section__title{
     margin-bottom : 16 rpx;
     padding-left : 30 rpx;
     padding-right : 30 rpx;
}
.section_gap .section__title{
     padding-left : 0 ;
     padding-right : 0 ;
}
.btn-area{
     padding : 0 30px ;
}
.btn-area button{
     margin-top : 20 rpx;
     margin-bottom : 20 rpx;
}
.page input{
     padding : 20 rpx 30 rpx;
     background-color : #fff ;
     margin-left : 20 rpx;
}




form表单的主要属性：
属性
类型
说明
report-submit
Boolean
是否返回formId用于发送模板消息
bindsubmit
EventHandle
携带form中的数据触发submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

 

注意：
本案例使用的modal组件即将过期，推荐使用wx.showModal API
将formSubmit方法改写成这样，就可以。目前wx.showModal这个API的content不支持换行，有可能是Bug，期待后续优化。

 

[JavaScript]  纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
formSubmit: function (e) {
     var value =  e.detail.value;
     wx.showModal({
       title: ‘您填写的表单如下‘ ,
       content: ‘姓名:‘ +value.name
               + ‘性别：‘ +value.gender
               + ‘年龄：‘ +value.age
               + ‘擅长的开发语言：‘ +value.technology
               + ‘是否公开信息：‘ + value.isPublic,
       showCancel: false ,
       success: function (res) {
         if (res.confirm) {
           console.log( ‘用户点击确定‘ )
         }
       }
     });
   },
点击查看原文

上一篇
微信小程序组件解读和分析：七、button按钮

下一篇
微信小程序组件解读和分析：十、input输入框

相关文章

最新文章