微信小程序添加表单教程

本文将为您介绍如何在微信小程序中添加表单，实现用户数据的收集和交互。

1. 创建表单

在微信小程序的开发者工具中，首先需要创建一个表单。在app.json中添加以下代码：

"pages": [
  "pages/index/index",
  "pages/form/form"
]

这里我们添加了一个名为form的页面，用于展示表单。

2. 设计表单页面

在pages/form/form.wxml中，添加以下代码：

<view class="container">
  <form bindsubmit="formSubmit">
    <view class="form-item">
      <text>姓名：</text>
      <input type="text" name="name" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <text>年龄：</text>
      <input type="number" name="age" placeholder="请输入年龄" />
    </view>
    <view class="form-item">
      <text>性别：</text>
      <radio-group name="gender">
        <label class="radio-label">
          <radio value="male" checked="{{true}}"/> 男
        </label>
        <label class="radio-label">
          <radio value="female"/> 女
        </label>
      </radio-group>
    </view>
    <view class="form-item">
      <text>兴趣爱好：</text>
      <checkbox-group name="hobby">
        <label class="checkbox-label">
          <checkbox value="reading"/> 阅读
        </label>
        <label class="checkbox-label">
          <checkbox value="traveling"/> 旅行
        </label>
        <label class="checkbox-label">
          <checkbox value="sports"/> 运动
        </label>
      </checkbox-group>
    </view>
    <button type="primary" form-type="submit">提交</button>
  </form>
</view>

这里我们创建了一个包含输入框、单选按钮、复选框和提交按钮的表单。

3. 样式设置

在pages/form/form.wxss中，添加以下样式：

.container {
  padding: 20rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item text {
  display: block;
  margin-bottom: 10rpx;
}

.form-item input {
  width: 100%;
  height: 50rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  padding: 10rpx;
}

.form-item .radio-label {
  display: block;
  margin-bottom: 20rpx;
}

.form-item .checkbox-label {
  display: block;
  margin-bottom: 20rpx;
}

button {
  margin-top: 20rpx;
}

这里我们对表单的布局和样式进行了设置。

4. 处理表单提交

在pages/form/form.js中，添加以下代码：

Page({
  data: {
    // 表单数据
  },
  formSubmit: function(e) {
    // 获取表单数据
    const formData = e.detail.value;
    // 处理表单数据，例如发送请求、存储数据等
    console.log(formData);
  }
});

这里我们定义了一个formSubmit方法，用于处理表单提交事件。在实际应用中，您可以根据需要对表单数据进行处理，例如发送请求、存储数据等。

现在，您已经成功在微信小程序中添加了一个表单，并可以进行数据收集和交互。根据实际需求，您可以对表单进行进一步的定制和优化。