微信小程序 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方法，输出一句表单已重置的提示信息。

注意事项

1. form组件中只能包含以下组件：input、textarea、checkbox、radio、switch和picker。

2. 当使用checkbox和radio组件时，需要为它们设置value属性。

3. form组件中的每个输入框必须设置name属性。

4. 如果设置了validate=”true”，则表单提交时会自动进行表单验证。

结论

form组件是微信小程序中用于提交表单数据的一个非常有用的组件。在开发微信小程序的过程中，使用form组件可以大大简化表单的开发过程，减少代码量。无论是通过bindsubmit事件获取表单数据，还是通过bindreset事件重置表单，都非常方便。