044 ∞ 表单组件：form

不二如是

                               
登录/注册后可看大图

上一讲搞定了checkbox，本次来学习form。

form，表单，将组件内的用户输入的：<switch/> <input/> <checkbox/> <slider/> <radio/><picker/>  提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时。

会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性：

属性名	类型	说明
report-submit	Boolean	是否返回 formId 用于发送模板消息
bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	EventHandle	表单重置时会触发 reset 事件

index.wxml：

1. <form bindsubmit="formSubmit" bindreset="formReset">
   
2.   <view class="section section_gap">
   
3.     <view class="section__title">switch</view>
   
4.     <switch name="switch"/>
   
5.   </view>
   
6.   <view class="section section_gap">
   
7.     <view class="section__title">slider</view>
   
8.     <slider name="slider" show-value ></slider>
   
9.   </view>
   
10. 
    
11.   <view class="section">
    
12.     <view class="section__title">input</view>
    
13.     <input name="input" placeholder="please input here" />
    
14.   </view>
    
15.   <view class="section section_gap">
    
16.     <view class="section__title">radio</view>
    
17.     <radio-group name="radio-group">
    
18.       <label><radio value="radio1"/>radio1</label>
    
19.       <label><radio value="radio2"/>radio2</label>
    
20.     </radio-group>
    
21.   </view>
    
22.   <view class="section section_gap">
    
23.     <view class="section__title">checkbox</view>
    
24.     <checkbox-group name="checkbox">
    
25.       <label><checkbox value="checkbox1"/>checkbox1</label>
    
26.       <label><checkbox value="checkbox2"/>checkbox2</label>
    
27.     </checkbox-group>
    
28.   </view>
    
29.   <view class="btn-area">
    
30.     <button formType="submit">Submit</button>
    
31.     <button formType="reset">Reset</button>
    
32.   </view>
    
33. </form>

复制代码

index.js：

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

复制代码

控制台输出：

---

课后作业


1、重置form表单需要用到什么属性？
a.bindsubmit  b.bindreset  c.report-submit  d.reset



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图