web端开发的童鞋知道，前端视图层和服务端交互都是通过form表单进行的，在小程序中也不例外。
认识form表单
表单。将组件内的用户输入的<switch><input><checkbox><slider><radio><picker> 提交。
当点击 <form>表单中 form-type 为 submit 的<button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
属性：
- report-submit：是否返回 formId 用于发送模板消息
- report-submit-timeout：等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
- bindsubmit：携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
- bindreset：表单重置时会触发 reset 事件
看完属性，撸一个模拟提交用户注册信息的代码：
wxml:
<view class='container_form'>
<form bindsubmit="formSubmit" bindreset="formReset" class='form'>
<view class='item'>
姓 名：
<input type='text' name="username" value='{{username}}' placeholder='请输入用户名'></input>
</view>
<view class='item'>
密 码：
<input type='password' name="password" value='{{password}}' placeholder='请输入密码'></input>
</view>
<view class='item'>
手 机：
<input type='number' name="phone" value='{{phone}}' placeholder='请输入手机号'></input>
</view>
<view class='item'>
地 址：
<input type='text' name="address" value='{{address}}' placeholder='请输入地址'></input>
</view>
<view class='item'>
邮 箱：
<input type='text' name="email" value='{{email}}' placeholder='请输入邮箱'></input>
</view>
<view class='item'>
性 别：
<radio-group name='sex'>
<label wx:for='{{sex}}'>
<radio value='{{item.name}}'>{{item.value}}</radio>
</label>
</radio-group>
</view>
<view>
国 籍：
<radio-group name='nationality'>
<label wx:for='{{items}}'>
<radio value='{{item.name}}'>{{item.value}}</radio>
</label>
</radio-group>
</view>
<view>
爱 好：
<checkbox-group name="hobby">
<label wx:for='{{hobby}}'>
<checkbox value='{{item.name}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit" class='btn'>确定</button>
<button open-type='reset' class='btn'>重置</button>
</form>
</view>
js:
//index.js
Page({
data: {
sex:[
{name:'male',value:"男"},
{ name: 'female', value: "女"}
],
items: [
{ name: 'CHN', value: '中国'},
{ name: 'USA', value: '美国' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
],
hobby:[
{ name: 'football', value: '足球' },
{ name: 'basketball', value: '篮球'},
{ name: 'pingpang', value: '乒乓球' },
{ name: 'yumaoqiu', value: '羽毛球'}
],
radio_check_content:"CHN"
},
formSubmit(e){
console.log(e)
}
})
wxss:
/**index.wxss**/
.item{
width: 95%;
display: flex;
flex-direction: row;
border: 1px solid #eee;
padding: 10rpx 5rpx;
margin: 5rpx;
}
.form{
width: 95%;
}
.btn{
margin: 5rpx;
}
.container_form {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
代码运行输入信息点击确定：
11-1.png
11-2.png
可以看到form表单中我们填写的信息！！！！表单学习就到此为止，只是做一个简单的尝试，希望童鞋们能够举一反三！
