微信小程序form表单的应用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27187991/article/details/67232818

<form bindsubmit="formSubmit" bindreset="formReset">
 <view>选择类别:</view>
  <view class="section section_gap">
    <radio-group name="radio-group">
      <label><radio value="radio1"/>爱情</label>
      <label><radio value="radio2"/>事业</label>
      <label><radio value="radio3"/>友情</label>
      <label><radio value="radio4"/>责任</label>
      <label><radio value="radio5"/>前途</label>
    </radio-group>
  </view>

 <text class="txt">我的姓名：</text>
  <view class="section">
    <input name="input" />
  </view>
 
  <text>我的头衔：</text>
  <view class="section">
    <input name="input"/>
  </view>

<text class="txt">介绍一下我自己：</text> 
<view class="section1">
  <textarea placeholder="" focus="{{focus}}" />
</view>



  <text class="txt">需要支付：</text>
  <view class="section" type="number">
    <input name="input" placeholder="0.01" />
  </view>



  <view class="btn-area">
    <button formType="submit" style="background:#ff9900">提交</button>
  </view>
</form>

Page({
   data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  },
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {
    console.log('form发生了reset事件')
  }
})

.section{
    border:1px solid #ddd;
    width:96%;
    margin:auto;
    height:80rpx;
    margin-top:20rpx;
}
.section1{
    border:1px solid #ddd;
    width:96%;
    margin:auto;
    margin-top:20rpx;
}