一、案例简介本案例基于微信小程序原生form组件开发实现表单提交功能并额外增加重置按钮点击重置可清空所有输入框内容。form组件可以将组件内的用户输入在触发 submit 事件时打包提交给事件处理函数是小程序中最常用的收集用户信息的组件。二、核心知识点form标签绑定bindsubmit表单提交事件表单内name属性是字段标识提交时作为 key。input输入框必须设置name属性表单提交才能拿到数据。form 的submit按钮form-typesubmit触发表单提交。form 的reset按钮form-typereset触发表单重置清空表单所有输入内容本次作业新增功能。重点form-typereset不需要自己写 js 清空逻辑原生 form 自带重置能力。三、完整代码实现1. form.wxml!--pages/form/form.wxml-- view classcontainer view classtitleform表单组件演示/view form bindsubmitformSubmit view classitem label姓名/label input typetext nameusername placeholder请输入姓名/ /view view classitem label手机号/label input typenumber namephone placeholder请输入手机号/ /view view classitem label留言/label textarea namemsg placeholder请输入留言/textarea /view view classbtn-box !--提交按钮-- button form-typesubmit typeprimary提交表单/button !--新增重置按钮 form-typereset-- button form-typereset typedefault重置/button /view /form /view2. form.wxss/*pages/form/form.wxss*/ .container{ padding: 30rpx; } .title{ text-align: center; font-size: 32rpx; margin-bottom: 40rpx; font-weight: bold; } .item{ margin-bottom: 30rpx; } label{ display: block; margin-bottom:10rpx; } input,textarea{ border:1rpx solid #ccc; padding: 20rpx; border-radius: 8rpx; } .btn-box{ display: flex; gap:20rpx; margin-top:40rpx; } button{ flex:1; }3. form.js// pages/form/form.js Page({ /** * 表单提交回调 */ formSubmit(e) { console.log(表单提交数据, e.detail.value); wx.showModal({ title: 提交成功, content: JSON.stringify(e.detail.value), showCancel: false }) } })4. form.json{ usingComponents: {} }四、代码说明表单bindsubmit绑定formSubmit函数点击【提交表单】按钮触发e.detail.value拿到表单中所有name对应的输入数据。重置按钮核心form-typereset是小程序 form 原生支持点击后自动清空当前 form 内所有输入框无需手写 js 赋值空字符串满足作业第二点要求。所有输入组件input、textarea必须配置name属性否则提交时无法获取该项的值。五、运行效果在输入框填写姓名、手机号、留言点击【提交表单】弹窗展示表单提交的数据控制台打印表单对象点击【重置】按钮页面所有输入框内容一键清空。六、踩坑总结忘记写name属性提交表单拿不到数据这是 form 组件最常见错误。reset 按钮必须放在form标签内部写在 form 外面无法触发重置。form-type属性写在 button 标签上不是 form 标签。七、小结小程序form组件封装了表单数据收集、提交、重置的基础能力配合bindsubmit事件可以快速实现信息收集页面。本次案例在基础表单提交功能之上增加重置按钮熟悉了 form 组件两种按钮类型submit 提交、reset 重置掌握小程序表单开发基础。