微信小程序入门（十一）：组件form表单

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表单中我们填写的信息！！！！表单学习就到此为止，只是做一个简单的尝试，希望童鞋们能够举一反三！