小程序表单添加

---

前言

小程序在录入信息是也是要书写表单的 以下是我自己书写的小程序的一些代码希望可以对你带来一些帮助

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、wxml

<view class="container">
  <form catchsubmit="formSubmit" catchreset="formReset">
    <view class="drawer_title">标题名称</view>
    <view class="drawer_content">
      <view class="top grid">
        <label class="title col-0">标题</label>
        <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>
      </view>
      <view class="top grid">
        <label class="title col-0">标题</label>
        <input class="input_base input_h30 col-1" name="mobile" value="110"></input>
      </view>
      <view class="top grid">
        <label class="title col-0">标题</label>
        <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>
      </view>
      <view class="top grid">
        <label class="title col-0">标题</label>
        <input class="input_base input_h30 col-1" name="Email" value="{{address}}"></input><view bindtap="site">定位</view>
      </view>
      <view class="top bottom grid">
        <label class="title col-0">备注</label>
        <input class="input_base input_h30 col-1" name="bz"></input>
      </view>
    </view>
    <view class="btn-area">
      <button style="" type="primary" formType="submit">提交</button>
      <button style="" formType="reset">重置</button>
    </view>
  </form>
</view>

二、小程序js

formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  },
  site(e){
    // console.log(e)
    let _this=this;
     //打开内置地图选取位置 成功返回地图经纬度和当前地址详细信息
     wx.chooseLocation({
       success(res){
         console.log(res.address)
         let address=res.address;
         console.log(address);
         _this.setData({
           address
         })
       }
    })
  },

小程序的表单也是需要url网络请求。随意需要书写后台Api接口