微信小程序的 form

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

偷光

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

阅读量333

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/wbskb/article/details/131114129

版权

该文章展示了如何在小程序中创建一个用户信息表单，包括姓名、性别、爱好和籍贯字段，使用form提交事件、radio-group、checkbox-group和picker组件。当用户填写并提交表单时，数据会被绑定到对应的data属性，并通过事件处理函数进行打印和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 表单的使用 -->
<!-- 用户信息 -->
<view class="register">
<!-- 
     整体表单提交
     form: submit事件 表单提交时触发，button 按钮必须指定 form-type 属性
      -->
  <form bindsubmit="submitForm" >
    <view class="form-field">
      <label for="">姓名:</label>
      <view class="field">
        <input model:value="{{name}}" type="text" placeholder="请输入您的姓名" />
      </view>
    </view>
    <view class="form-field">
      <label for="">性别:</label>
      <view class="field">
        <radio-group bindchange="sexValue">
          <radio value="男" checked />男
          <radio value="女" />女
        </radio-group>
      </view>
    </view>
    <view class="form-field">
      <label for="">爱好:</label>
      <view class="field">
        <checkbox-group bindchange="fondValue">
          <checkbox value="写代码" checked />写代码
          <checkbox value="睡大觉" />睡大觉
        </checkbox-group>
      </view>
    </view>
    <view class="form-field">
      <label for="">籍贯:</label>
      <view class="field">
        <picker mode="region" bindchange="townValue">请选择籍贯</picker>
      </view>
    </view>
    <button size="mini" type="primary" form-type="submit" >保存</button>
  </form>
</view>

data:{

    numData:-1,

    name:'',

    sex:'',

    fond:[],

    town:[]

  },

  // 提交表单

  submitForm(){

    console.log(this.data.fond)

  },

  // 性别

  sexValue(e) {

    console.log(e.detail.value)

    this.setData({'sex': e.detail.value})

  },

  // 爱好

  fondValue(e) {

   console.log(e.detail.value)

   this.setData({fond: e.detail.value})

  },

  // 籍贯

  townValue(e){

    console.log(e.detail.value)

    this.setData({town:e.detail.value})

  }