1、.wxml
<view> <form bindsubmit="formSubmit" bindreset="formReset"> <view class="container"> <checkbox-group bindchange="checkboxChange" name="checkbox-group"> <label class="checkbox" > <checkbox value="checkbox1"/>checkbox1 </label> <label class="checkbox" > <checkbox value="checkbox2"/>checkbox1 </label> <label class="checkbox" > <checkbox value="checkbox3"/>checkbox1 </label> </checkbox-group> </view> <view> <radio-group class="radio-group" name="radio-group"> <label> <radio value="战士" checked="true"/>战士 </label> <label> <radio value="法师" checked="true"/>法师 </label> <label> <radio value="牧师" checked="true"/>牧师" </label> </radio-group> </view> <view> <view>input</view> <input name="input" placeholder='please input here'/> </view> <!--form表单内部添加button按钮实现相应事件 submit元素提交 reset元素重置--> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset">Reset</button> </view> </form> </view>
2、.js
Page({
formSubmit:
function (e) {
console.log(
'form发生了submit事件,携带数据为:', e.detail.value)
},
formReset:
function () {
console.log(
'form发生了reset事件')
}
})
3、输出结果
submitform发生了submit事件,携带数据为: {checkbox-group: Array(2), radio-group: "牧师", input: "飒飒"}