微信小程序 form組件詳解及簡單實(shí)例
更新時(shí)間：2017年01月10日 14:40:04 投稿：lqh
這篇文章主要介紹了微信小程序 form組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下
微信小程序form
相關(guān)文章：
實(shí)現(xiàn)效果圖：
將表單內(nèi)的用戶輸入的switch input checkbox slider radio picker 提交
當(dāng)點(diǎn)擊 <form/> 表單中 formType 為 submit 的 <button/> 組件時(shí)，會(huì)將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。
| 屬性名 | 類型 | 說明 |
|---|---|---|
| report-submit | Boolean | 是否返回formId用于發(fā)送模板消息 |
| bindsubmit | EventHandle | 攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail = { value : {"name":"value"} , formId:"" } |
| bindreset | EventHandle | 表單重置時(shí)會(huì)觸發(fā)reset事件 |
示例代碼：
<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事件')
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript中fetch方法的使用示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要分享的是JavaScript的八種數(shù)據(jù)類型，ES5的時(shí)候，我們大家認(rèn)知的數(shù)據(jù)類型是?6種的，但是ES6?中新增了一種?Symbol，谷歌67版本中還出現(xiàn)了一種?bigInt，是指安全存儲(chǔ)、操作大整數(shù)，像下面文章我可沒就來看看這八種數(shù)據(jù)類型的詳細(xì)介紹吧2022-01-01
JS版的date函數(shù)（和PHP的date函數(shù)一樣）
這篇文章主要介紹了JS版的date函數(shù),使用方法和PHP的date函數(shù)一樣,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了帶你徹底理解JavaScript中的原型對(duì)象,文中有詳細(xì)的代碼介紹,對(duì)正在學(xué)習(xí)js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04
微信小程序 less文件編譯成wxss文件實(shí)現(xiàn)辦法
這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實(shí)現(xiàn)辦法的相關(guān)資料,這里給出具體實(shí)現(xiàn)方法，需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了前端JS圖片懶加載原理方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
Three.js添加陰影和簡單后期處理實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Three.js添加陰影和簡單后期處理實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
微信小程序 解析網(wǎng)頁內(nèi)容詳解及實(shí)例
這篇文章主要介紹了微信小程序 解析網(wǎng)頁內(nèi)容詳解及實(shí)例的相關(guān)資料,這里使用爬蟲對(duì)復(fù)雜的網(wǎng)頁進(jìn)行抓取，遇到些問題，這里整理下并解決，需要的朋友可以參考下2017-02-02