這篇文章主要介紹了微信小程式表單Form實例詳解的相關資料,這裡對form 表單進行了詳細介紹,並附實例程式碼,需要的朋友可以參考下
微信小程式表單Form實例
表單Form的應用很廣泛,我們可以利用form設計登入註冊,也可以設計一種答題問卷的形式,今天主要講一下form的使用
form表單,將元件內輸入的"switch","input","checkbox","slider","radio","picker"的值進行提交,資料的格式為:name :value,所以表單中控制項都需要新增name屬性,否則找不到對應控制項的值。其主要屬性:
主要程式碼,建立一個form表單:
form表单
如何取得form內部的控制項的值,就需要用到form的相關屬性,程式碼如下
#// pages/index/Component/FormM/FormM.js Page({ //初始化数据 data: { array: ['大中国', '美国', '巴西', '小日本'], index: 0, date: '2016-12-20', time: '11:19', allValue:'' }, //表单提交按钮 formSubmit: function(e) { console.log('form发生了submit事件,携带数据为:', e.detail.value) this.setData({ allValue:e.detail.value }) }, //表单重置按钮 formReset: function(e) { console.log('form发生了reset事件,携带数据为:', e.detail.value) this.setData({ allValue:'' }) }, //---------------------与选择器相关的方法 //地区选择 bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, //日期选择 bindDateChange: function(e) { this.setData({ date: e.detail.value }) }, //时间选择 bindTimeChange: function(e) { this.setData({ time: e.detail.value }) }, })
##效果圖:
輸出表單中的結果值:
#
以上是微信小程式中表單Form的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!