微信小程序组件系列：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代码：

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

下面是JS代码：

1. Page({
2. data: {
3. pickerHidden: true,
4. chosen: '',
5. modalHidden: true,
6. name: '',
7. gender: '',
8. age: '',
9. technology: '',
10. isPublic: ''
11. },
12. formSubmit: function(e) {
13. var value = e.detail.value;
14. this.setData(
15. {
16. modalHidden: false,
17. name: value.name,
18. gender: value.gender,
19. age: value.age,
20. technology: value.technology,
21. isPublic: value.isPublic
22. }
23. );
24. console.log('form发生了submit事件，携带数据为：', e.detail.value)
25. },
26. formReset: function(e) {
27. console.log('form发生了reset事件，携带数据为：', e.detail.value)
28. this.setData({
29. chosen: ''
30. })
31. },
32. modalChange: function(e) {
33. this.setData({
34. modalHidden: true
35. })
36. },
37. })

下面是WXSS代码：

1. wx-label {
2. display: block;
3. margin-top: 10rpx;
4. margin-left: 15rpx;
5. }
6. .section__title{
7. font-size: 30rpx;
8. margin-bottom: 30rpx;
9. font-weight: bold;
10. }
11. .page {
12. min-height: 100%;
13. flex: 1;
14. background-color: #FBF9FE;
15. font-size: 32rpx;
16. font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
17. overflow: hidden;
18. }
19. .page__hd{
20. padding: 50rpx 50rpx 100rpx 50rpx;
21. text-align: center;
22. }
23. .page__title{
24. display: inline-block;
25. padding: 20rpx 40rpx;
26. font-size: 32rpx;
27. color: #AAAAAA;
28. border-bottom: 1px solid #CCCCCC;
29. }
30. .page__desc{
31. display: none;
32. margin-top: 20rpx;
33. font-size: 26rpx;
34. color: #BBBBBB;
35. }
36. .section{
37. margin-bottom: 80rpx;
38. }
39. .section_gap{
40. padding: 0 30rpx;
41. }
42. .section__title{
43. margin-bottom: 16rpx;
44. padding-left: 30rpx;
45. padding-right: 30rpx;
46. }
47. .section_gap .section__title{
48. padding-left: 0;
49. padding-right: 0;
50. }
51. .btn-area{
52. padding: 0 30px;
53. }
54. .btn-area button{
55. margin-top: 20rpx;
56. margin-bottom: 20rpx;
57. }
58. .page input{
59. padding: 20rpx 30rpx;
60. background-color: #fff;
61. margin-left: 20rpx;
62. }

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