本文編輯：  揚瀏覽 6787 4 版權所有，嚴禁轉載

組件說明:

表單，將組件內的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

當點擊 <form/> 表單中 formType 為 submit 的<button/> 組件時，會將表單組件中的 value 值進行提交，需要在表單組件中加上 name 來作為 key。

組件用法：

重置:<button formType="reset">Reset</button>

提交: <button formType="submit">Submit</button>

wxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">表單控件</text>
  </view>
  <form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
     <view class="section">
      <view class="section__title">您的姓名：</view>
      <input name="name" placeholder="姓名：" />
    </view>
    <view class="section section_gap">
      <view class="section__title">性別：</view>
      <radio-group name="gender">
        <label><radio value="男"/>男</label>
        <label><radio value="女"/>女</label>
        <label><radio value="其他"/>其他</label>
      </radio-group>
    </view>
    <view class="section section_gap">
      <view class="section__title">年齡：</view>
      <slider value="18" name="age" show-value ></slider>
    </view>
    <view class="section section_gap">
      <view class="section__title">擅長的開發語言：</view>
      <checkbox-group name="technology">
        <label><checkbox value="Java"/>Java</label>
        <label><checkbox value="JavaScript"/>JavaScript</label>
        <label><checkbox value="C++"/>C++</label>
        <label><checkbox value="C"/>C</label>
        <label><checkbox value="Object-C"/>Object-C</label>
        <label><checkbox value="C#"/>C#</label>
        <label><checkbox value="Python"/>Python</label>
        <label><checkbox value="PHP"/>PHP</label>
        <label><checkbox value="Ruby"/>Ruby</label>
        <label><checkbox value="Swift"/>Swift</label>
      </checkbox-group>
    </view>
    <view class="section section_gap">
      <view class="section__title">是否公開信息：</view>
      <switch name="isPublic"/>
    </view>
    <view class="btn-area">
      <button formType="submit">Submit</button>
      <button formType="reset">Reset</button>
    </view>

    <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
      <view> 您填寫的表單如下 </view>
      <view> 姓名:{{name}} </view>
      <view> 性別：{{gender}} </view>
      <view> 年齡：{{age}} </view>
      <view> 擅長的開發語言：{{technology}} </view>
      <view> 是否公開信息：{{isPublic}} </view>
    </modal>
  </form>
</view>

js

Page({
  data: {
    pickerHidden: true,
    chosen: '',
    modalHidden: true,
    name: '',
    gender: '',
    age: '',
    technology: '',
    isPublic: ''
  },
  formSubmit: function(e) {
    var value =  e.detail.value;
    this.setData(
      {
        modalHidden: false,
        name: value.name,
        gender: value.gender,
        age: value.age,
        technology: value.technology,
        isPublic: value.isPublic
      }
    );
    console.log('form發生了submit事件，攜帶數據為：', e.detail.value)
  },
  formReset: function(e) {
    console.log('form發生了reset事件，攜帶數據為：', e.detail.value)
    this.setData({
      chosen: ''
    })
  },

  modalChange: function(e) {
    this.setData({
      modalHidden: true
    })
  },
})

wxss

wx-label {
  display: block;
  margin-top: 10rpx;
  margin-left: 15rpx;
}

.section__title{
  font-size: 30rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}

.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.btn-area{
    padding: 0 30px;
}
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
    margin-left: 20rpx;
}

主要屬性：

注意：

本案例使用的modal組件即將過期，推薦使用wx.showModal API
將formSubmit方法改寫成這樣，就可以。目前wx.showModal這個API的content不支持換行，有可能是Bug，期待后續優化。

  formSubmit: function(e) {
    var value =  e.detail.value;
    wx.showModal({
      title: '您填寫的表單如下',
      content: '姓名:'+value.name
              +'性別：'+value.gender
              +'年齡：'+value.age
              +'擅長的開發語言：'+value.technology
              +'是否公開信息：' + value.isPublic,
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          console.log('用戶點擊確定')
        }
      }
    });
  },