小程序学习之旅----表单组件 button checkbox form input label radio slider switch textarea 获取表单数据

<view class='input'>
  <input placeholder="请输入内容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/>


</view>

<button bindtap='getData'>获取值</button>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputValue: ''   /*inputValue*/
  },

  doInput: function (e) {

    console.log(e);

    this.setData({
      inputValue: e.detail.value
    })
  },
  getData(){

    console.log(this.data.inputValue);
  }
  
})

<view class='input'>
  <input placeholder="请输入内容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/>


<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>
  

</view>


<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

 <switch checked bindchange="switch1Change"/>

<button bindtap='getData'>获取值</button>

// pages/register/register.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputValue: '',   /*inputValue*/
    items: [
      { name: 'USA', value: '美国', checked: 'true'},
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' }
    ]
  },

  doInput: function (e) {

    console.log(e);

    this.setData({
      inputValue: e.detail.value
    })
  },
  
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  },
   radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
  , switch1Change: function (e) {
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  }
  , 
  getData() {

    console.log(this.data.inputValue);
  }
  
})

<form bindsubmit='doPost'> 
    <view class='input'>
      <input placeholder="请输入内容1" name='username' confirm-type="done" type='text' focus="true" bindinput='doInput'/>


    <checkbox-group bindchange="checkboxChange" name='checkbox'>
      <label class="checkbox" wx:for="{{items}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
      </label>
    </checkbox-group>    

    </view>
    <radio-group class="radio-group" bindchange="radioChange" name="radio">
      <label class="radio" wx:for="{{items}}">
        <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}}
      </label>
    </radio-group>

    <switch checked bindchange="switch1Change" name="flag"/>

    <button formType="submit">提交</button>
</form>

// pages/register/register.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputValue: '',   /*inputValue*/

    items: [
      { name: 'USA', value: '美国', checked: 'true'},
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' }
    ]
  },

  doInput: function (e) {

    console.log(e);

    this.setData({
      inputValue: e.detail.value
    })
  },
  
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  },
   radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
  , switch1Change: function (e) {
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  }
  , 
  doPost(e) {


   //获取form表单提交的数据  注意表单要定义名称
    console.log(e.detail.value);

    
  }
  
})