這篇文章給大家分享的是有關微信小程序中表單Form的創(chuàng)建方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)成立與2013年，先為濠江等服務建站，濠江等地企業(yè)，進行企業(yè)商務咨詢服務。為濠江企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

微信小程序 表單Form實例

表單Form的應用很廣泛，我們可以利用form設計登錄注冊，也可以設計一種答題問卷的形式，今天主要講一下form的使用

form表單，將組件內(nèi)輸入的"switch","input","checkbox","slider","radio","picker"的值進行提交,數(shù)據(jù)的格式為：name:value，所以表單中控件都需要添加name屬性，否則找不到對應控件的值。其主要屬性：

主要代碼，創(chuàng)建一個form表單：

  form表單
  



  
   switch開關
   
  
  
   slider滑塊
   
  
  
   input輸入框
   
  
  
   radio單選
   
    radio1
    radio2
   
  
  
   checkbox多選
   
    checkbox1
    checkbox2
   
  
  
   地區(qū)選擇器
   
    
     當前選擇：{{array[index]}}
    
   
  
  
   時間選擇器
   
    
     當前選擇: {{time}}
    
   
  
  
   日期選擇器
   
    
     當前選擇: {{date}}
    
   
  
  
   Submit提交
   Reset重置
  
 

如何獲取form內(nèi)部的控件的值，就需要用到form的相關屬性，代碼如下

// pages/index/Component/FormM/FormM.js
Page({
 //初始化數(shù)據(jù)
 data: {
  array: ['大中國', '美國', '巴西', '小日本'],
  index: 0,
  date: '2016-12-20',
  time: '11:19',
  allValue:''
 },
 //表單提交按鈕
 formSubmit: function(e) {
  console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
  this.setData({
   allValue:e.detail.value
  })
 },
 //表單重置按鈕
 formReset: function(e) {
  console.log('form發(fā)生了reset事件，攜帶數(shù)據(jù)為：', e.detail.value)
  this.setData({
   allValue:''
  })
 },
 //---------------------與選擇器相關的方法
 //地區(qū)選擇
 bindPickerChange: function(e) {
  console.log('picker發(fā)送選擇改變，攜帶值為', 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的創(chuàng)建方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：微信小程序中表單Form的創(chuàng)建方法-創(chuàng)新互聯(lián)
標題鏈接：http://weahome.cn/article/hipoe.html