小程序form表单

最新推荐文章于 2024-08-07 16:57:39 发布

原创最新推荐文章于 2024-08-07 16:57:39 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

小程序专栏收录该内容

5 篇文章

订阅专栏

简单的小程序的form表单

<form bindsubmit="submit" bindreset="reset">
  <view class="section section_gap">
    <view class="section__tile">是否今年入学</view>
    <switch name="isEnter"></switch>
  </view>
  <view class="section section_gap">
    <view class="section__title">姓名</view>
    <input name="name" placeholder="姓名"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">性别</view>
   <radio-group name="sex">
    <label><radio value="0" checked/>男</label>
    <label><radio value="1"/>女</label>
   </radio-group>
  </view>
  <view class="section section_gap">
      <view class="section__title">年级</view>
      <picker name="gradePicker" bindchange="bindPickerChange" value="{{index}}" range="{{grade}}">
        <view class="picker">
          当前选择：{{grade[index]}}
        </view>
      </picker>
    </view>
  <view class="btnear">
    <button type="default" form-type="submit">提交</button>
    <button type="default" form-type="reset">重置</button>
  </view>
  <view>
  </view>
</form>

js代码如下：

data: {
    isEnter:true,
    grade:['一年级','二年级','三年级','四年级','五年级','六年级'],
    index:0,
    name:'',
    sex:'0'
  },
  submit:function(e){
    let { name, gradePicker, isEnter, sex } = e.detail.value;
    this.setData({
      name,
      index:gradePicker,
      isEnter,
      sex
    })
  },
  reset:function(){

  },
  bindPickerChange:function(e){
    this.setData({
      index:e.detail.value
    })
  },

注意form表单中的组件需要添加name属性，提交数据为name:value,比如sex:1