微信小程序 form组件详解

简介

form组件是微信小程序中的一个表单组件，主要用于提交表单数据。在开发微信小程序中，使用form组件可以大大简化表单的开发过程，减少代码量。

使用方法

form组件的基本使用方法如下：

<form bindsubmit="submitForm">
  <input type="text" name="name" placeholder="请输入姓名" />
  <input type="tel" name="phone" placeholder="请输入电话" />
  <button form-type="submit">提交</button>
</form>

其中，form组件通过bindsubmit事件绑定了一个submitForm方法，当用户点击提交按钮时，会触发submitForm方法。

在表单中，我们可以使用多种类型的输入框组件，例如input、textarea、checkbox、radio等等。使用这些组件时，我们需要为它们设置name属性，以便在提交表单时能够获取到相应的值。

在最后一个button组件中，我们使用了form-type属性，将其设置为submit，表示这是一个提交表单的按钮。

示例代码

示例1：表单提交示例

<form bindsubmit="submitForm">
  <input type="text" name="name" placeholder="请输入姓名" />
  <input type="tel" name="phone" placeholder="请输入电话" />
  <button form-type="submit">提交</button>
</form>

<script>
Page({
  submitForm: function(e) {
    console.log(e.detail.value);
  }
})
</script>

在这个示例中，我们创建了一个表单，其中有两个输入框分别用于输入姓名和电话，还有一个提交按钮。当用户点击提交按钮时，会触发submitForm方法，输出表单中输入的内容。在submitForm方法中，我们使用了e.detail.value获取到表单中输入的值。

示例2：表单重置示例

<form bindreset="resetForm">
  <input type="text" name="name" placeholder="请输入姓名" />
  <input type="tel" name="phone" placeholder="请输入电话" />
  <button form-type="reset">重置</button>
</form>

<script>
Page({
  resetForm: function() {
    console.log('表单已重置');
  }
})
</script>

在这个示例中，我们创建了一个表单，其中有两个输入框分别用于输入姓名和电话，还有一个重置按钮。当用户点击重置按钮时，会触发resetForm方法，输出一句表单已重置的提示信息。