1. 基本用法：
<form bindsubmit="formSubmit" bindreset="formReset">
<!-- 表单元素 -->
</form>
- bindsubmit：表单提交时触发的事件，可以在事件处理函数中执行相应的逻辑。
- bindreset：表单重置时触发的事件，可以在事件处理函数中执行相应的逻辑。
2. 表单提交：
在 form 中包裹需要提交的表单元素，并设置 bindsubmit 事件，实现表单提交。
<form bindsubmit="formSubmit">
<input name="username" placeholder="用户名" />
<input name="password" type="password" placeholder="密码" />
<button form-type="submit">提交</button>
</form>
Page({
formSubmit: function (event) {
console.log('Form submitted:', event.detail.value);
// 处理表单提交逻辑
}
})
3. 表单重置：
可以使用 form 组件的 bindreset 事件实现表单重置功能。
<form bindreset="formReset">
<input name="username" placeholder="用户名" />
<input name="password" type="password" placeholder="密码" />
<button form-type="reset">重置</button>
</form>
Page({
formReset: function () {
console.log('Form reset');
// 处理表单重置逻辑
}
})
4. 数据绑定：
在 form 中使用数据绑定，可以动态更新表单元素的值。
<form bindsubmit="formSubmit">
<input name="username" value="{{formData.username}}" placeholder="用户名" />
<input name="password" value="{{formData.password}}" type="password" placeholder="密码" />
<button form-type="submit">提交</button>
</form>
Page({
data: {
formData: {
username: '',
password: ''
}
},
formSubmit: function (event) {
console.log('Form submitted:', event.detail.value);
// 处理表单提交逻辑
}
})
5. 自定义样式：
可以在 form 上设置样式，影响整个表单的样式。
<form bindsubmit="formSubmit" style="background-color: #f0f0f0; padding: 10px;">
<!-- 表单元素 -->
</form>
6. 自定义属性：
可以在 form 上设置自定义属性，用于在事件处理函数中获取额外的信息。
<form bindsubmit="formSubmit" data-custom="customData">
<!-- 表单元素 -->
</form>
Page({
formSubmit: function (event) {
console.log('Form submitted:', event.detail.value);
console.log('Custom data:', event.currentTarget.dataset.custom);
// 处理表单提交逻辑
}
})
以上是关于微信小程序 form 组件的一些基本用法和属性。form 主要用于包裹表单元素，并提供提交和重置表单的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/803/微信小程序