如何在微信小程序中使用form表单组件

如何在微信小程序中使用form表单组件？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击<form/>表单中 formType 为 submit 的<button/>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

示例代码：

示例代码：

<formbindsubmit="formSubmit"bindreset="formReset">
<viewclass="sectionsection_gap">
<viewclass="section__title">switch</view>
<switchname="switch"/>
</view>
<viewclass="sectionsection_gap">
<viewclass="section__title">slider</view>
<slidername="slider"show-value></slider>
</view>
<viewclass="section">
<viewclass="section__title">input</view>
<inputname="input"placeholder="pleaseinputhere"/>
</view>
<viewclass="sectionsection_gap">
<viewclass="section__title">radio</view>
<radio-groupname="radio-group">
<label><radiovalue="radio1"/>radio1</label>
<label><radiovalue="radio2"/>radio2</label>
</radio-group>
</view>
<viewclass="sectionsection_gap">
<viewclass="section__title">checkbox</view>
<checkbox-groupname="checkbox">
<label><checkboxvalue="checkbox1"/>checkbox1</label>
<label><checkboxvalue="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<viewclass="btn-area">
<buttonformType="submit">Submit</button>
<buttonformType="reset">Reset</button>
</view>
</form>
Page({
formSubmit:function(e){
console.log('form发生了submit事件，携带数据为：',e.detail.value)
},
formReset:function(){
console.log('form发生了reset事件')
}
})

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。