微信小程序（十六）form組件詳細(xì)介紹
form表單組件 是提交form內(nèi)的所有選中屬性的值，注意每個(gè)form表單內(nèi)的組件都必須有name屬性指定否則提交不上去，button中的type兩個(gè)submit，reset屬性分別對(duì)應(yīng)form的兩個(gè)事件
主要屬性：
wxml
<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" >
<checkbox-group name="checkbox" bindchange="listenerCheckbox">
<label style="display: flex" wx:for-items="{{items}}">
<checkbox value="{{item.name}}"/>{{item.value}}
</label>
</checkbox-group>
<!--button formType屬性?xún)蓚€(gè)可選值submit, reset分別會(huì)觸發(fā)form的submit，reser事件 -->
<button formType="submit" type="primary">提交</button>
<button formType="reset" type="warn">重置</button>
</form>
js
Page({
/**
* 初始化數(shù)據(jù)
*/
data:{
items: [
{name: 'JAVA', value: 'Android', checked: 'true'},
{name: 'Object-C', value: 'IOS'},
{name: 'JSX', value: 'ReactNative'},
{name: 'JS', value: 'wechat'},
{name: 'Python', value: 'Web'}
]
},
listenCheckboxChange: function() {
console.log(e.detail.value);
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
}
})
相關(guān)文章：
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁(yè)面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關(guān)文章
微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼的相關(guān)資料,這里實(shí)現(xiàn)搖一搖抽獎(jiǎng)的功能，需要的朋友可以參考下2017-01-01
lodash內(nèi)部方法getData和setData實(shí)例解析
本篇章我們將了解lodash里內(nèi)部關(guān)于Data的操作方法，重點(diǎn)關(guān)注getData、setData兩個(gè)內(nèi)部方法，同時(shí)由實(shí)現(xiàn)上引申其他內(nèi)部封裝的方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了 微信小程序 POST請(qǐng)求的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
微信小程序 wx.request方法的異步封裝實(shí)例詳解
這篇文章主要介紹了微信小程序 wx.request方法的異步封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
Ctrl+Enter提交內(nèi)容信息...2006-06-06
JSON stringify及parse方法實(shí)現(xiàn)數(shù)據(jù)深拷貝
這篇文章主要為大家介紹了JSON.stringify遞歸及JSON.parse有限狀態(tài)自動(dòng)機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript自動(dòng)化測(cè)試添加頁(yè)面DOM元素唯一ID方案示例
這篇文章主要為大家介紹了JavaScript自動(dòng)化測(cè)試添加頁(yè)面DOM元素唯一ID方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
5種方法告訴你如何使JavaScript 代碼庫(kù)更干凈
J avaScript無(wú)處不在，從PC端到移動(dòng)設(shè)備端，甚至是后端，都在使用JavaSc ript。在本文中，將嘗試一些可用來(lái)使代碼看起來(lái)更簡(jiǎn)潔的實(shí)踐方案，希望能幫助到大家2021-09-09
這篇文章主要為大家介紹了詳解如何讓頁(yè)面與?iframe?進(jìn)行通信實(shí)現(xiàn)實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
ECMAScript?6數(shù)組的擴(kuò)展實(shí)例詳解
這篇文章主要為大家介紹了ECMAScript?6數(shù)組的擴(kuò)展實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08