微信小程序——表单组件（checkbox,input,picker,switch,button,radio,slider)

表单组件

forms.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
     array:['中国','美国','巴西','日本'],
     index:1
  },
    formSubmit:function(e){
      console.log('form发生了submit事件，携带数据为:',e.detail.value)
    },
    formReset:function(){
      console.log('form发生了reset事件')
    },
    bindPickerChange:function(e){
      console.log('picker发送选择改变，携带值为',e.detail.value)
      this.setData({
        index:e.detail.value
      })
    }
})

forms.wxml文件

<view class="container">
   <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="section">

         <view class="section-title">checkbox</view>
         <checkbox-group name="checkbox">
             <view>
                 <label><checkbox value="checobox1"/>checkbox1</label>
             </view>
             <view>
                 <label><checkbox value="checobox2"/>checkbox2</label>
             </view>
         </checkbox-group>
       </view>

       <view class="section">
         <view class="section-title">input</view>
         <input class="border-input" name="input" password="{{false}}" placeholder="请输入"/>
       </view>

       <view class="section">
         <view class="section-title">地区选择器</view>
         <picker bindchange="bindPickerChange" name="mypicker" value="{{index}}" range="{{array}}">
            <view class="picker">
               当前选择:{{array[index]}}
            </view>
          </picker>
       </view>

       <view class="section">
          <view class="section-title">radio</view>
          <radio-group name="radio-group">
              <label><radio value="radio1"/>radio1</label>
              <label><radio value="radio2"/>radio2</label>
          </radio-group>
       </view>

       <view class="section">
           <view class="section-title">slider</view>
           <slider name="slider" min="1" max="1000" show-value></slider>
       </view>

       <view class="section">
           <view class="section-title">switch</view>
           <switch name="switch" type="switch"/>
       </view>

       <view class="section">
           <button type="warn" formType="submit" plain>submit</button>
           <button formType="reset">Reset</button>
       </view>

  </form>
</view>

效果图