微信小程序表單組件form怎么使用

這篇“微信小程序表單組件form怎么使用”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序表單組件form怎么使用”文章吧。

微信小程序form

表單，將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

當(dāng)點(diǎn)擊<form/>表單中 formType 為 submit 的<button/>組件時，會將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。

示例代碼：

<form bindsubmit="formSubmit" bindreset="formReset"><view class="section section_gap"><view class="section__title">switch</view><switch name="switch"/></view><view class="section section_gap"><view class="section__title">slider</view><slider name="slider" show-value ></slider></view><view class="section"><view class="section__title">input</view><input name="input" placeholder="please input here" /></view><view class="section section_gap"><view class="section__title">radio</view><radio-group name="radio-group"><label><radio value="radio1"/>radio1</label><label><radio value="radio2"/>radio2</label></radio-group></view><view class="section section_gap"><view class="section__title">checkbox</view><checkbox-group name="checkbox"><label><checkbox value="checkbox1"/>checkbox1</label><label><checkbox value="checkbox2"/>checkbox2</label></checkbox-group></view><view class="btn-area"><button formType="submit">Submit</button><button formType="reset">Reset</button></view></form>

Page({
  formSubmit: function(e) {console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
  },
  formReset: function() {console.log('form發(fā)生了reset事件')
  }
})

以上就是關(guān)于“微信小程序表單組件form怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。