前言本次案例《4.1 form 组件》学习微信小程序 form 表单组件实现表单提交功能。在基础表单功能之上新增重置按钮点击重置按钮可以清空所有输入框内容。一、知识点介绍form 组件表单容器绑定bindsubmit事件点击form-typesubmit按钮收集表单内所有控件数据。form-type 属性submit提交表单触发 bindsubmit 事件reset重置表单清空表单全部输入内容需求扩展增加重置按钮点击清空输入框数值。二、完整代码pages/index/index.wxmlform bindsubmitformSubmit bindresetformReset view姓名input namename placeholder请输入姓名//view view年龄input nameage placeholder请输入年龄//view view专业input namemajor placeholder请输入专业//view button form-typesubmit提交表单/button button form-typereset重置清空/button /formpages/index/index.jsPage({ //表单提交事件 formSubmit(e) { console.log(表单提交的数据, e.detail.value); wx.showModal({ title: 提交成功, content: JSON.stringify(e.detail.value), }) }, //表单重置事件 formReset() { console.log(表单已重置清空); wx.showToast({ title: 已重置, icon: success }) } })pages/index/index.wxssview{ margin:20rpx; font-size:32rpx; } input{ border:1rpx solid #ccc; padding:10rpx; margin:10rpx 0; } button{ margin:20rpx; }三、运行测试效果在输入框填写姓名、年龄、专业。点击【提交表单】按钮触发bindsubmit收集表单所有 name 对应的数据弹窗展示表单内容。点击【重置清空】按钮触发bindreset所有输入框自动清空弹出重置成功提示。原理form 内置 reset 能力form-typereset按钮可以直接清空表单同时触发 bindreset 事件。四、核心要点总结form 内部控件必须设置name属性否则提交时无法获取该控件的值。form-typesubmit 和 form-typereset 是 form 表单内置按钮类型无需额外写点击事件也能生效。bindsubmit表单提交回调e.detail.value拿到表单全部数据。bindreset表单重置回调在清空表单后执行自定义逻辑。五、小结本案例掌握小程序 form 表单组件基础用法完成表单提交并且按照作业要求增加重置按钮一键清空输入框内容。form 是小程序收集用户输入的核心组件广泛用于登录、注册、信息填写页面。