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: 10rpx; margin-left: 15rpx;}.section__title{ font-size: 30rpx; margin-bottom: 30rpx; font-weight: bold;}.page { min-height: 100%; flex: 1; background-color: #FBF9FE; font-size: 32rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; overflow: hidden;}.page__hd{ padding: 50rpx 50rpx 100rpx 50rpx; text-align: center;}.page__title{ display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC;}.page__desc{ display: none; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB;}.section{ margin-bottom: 80rpx;}.section_gap{ padding: 0 30rpx;}.section__title{ margin-bottom: 16rpx; padding-left: 30rpx; padding-right: 30rpx;}.section_gap .section__title{ padding-left: 0; padding-right: 0;}.btn-area{ padding: 0 30px;}.btn-area button{ margin-top: 20rpx; margin-bottom: 20rpx;}.page input{ padding: 20rpx 30rpx; background-color: #fff; margin-left: 20rpx;} |
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('用户点击确定') } } }); }, |