企业官网建设流程全解析

一、实验目的

掌握微信小程序 form 表单组件的基础使用，理解表单提交与重置事件；实现表单数据收集功能，并增加重置按钮，实现一键清空所有输入框内容，完成信息填报页面开发。

二、相关知识点

1. <form>组件：用于包裹各类表单控件，支持绑定bindsubmit提交事件、bindreset重置事件。
2. form-type="submit"：按钮属性，点击后触发表单提交事件，收集表单内所有带name属性控件的值。
3. form-type="reset"：按钮属性，触发表单重置，自动清空表单内输入框内容。
4. 表单控件（input、textarea）必须配置name属性，提交时才能获取对应字段数据。

三、项目结构

pages └─index ├─index.wxml ├─index.js ├─index.wxss └─index.json app.json

四、功能说明

1. 页面包含姓名、手机号输入框、留言文本域，用于填写表单信息。
2. 提交按钮：点击触发formSubmit事件，获取表单所有字段数据，在页面展示提交结果。
3. 重置按钮：点击触发formReset事件，自动清空全部输入框内容，同时清空页面上展示的提交结果，满足作业附加需求。

五、运行效果

在输入框填写信息，点击【提交】，页面下方展示提交的表单数据；点击【重置】，所有输入框清空，提交结果消失。

六、总结

小程序 form 组件可以一次性批量收集表单数据，内置 reset 重置能力，不需要手动逐个清空输入框，简化表单开发流程，广泛用于信息登记、留言反馈、注册登录等场景。开发时要注意，表单控件必须添加 name 属性，否则提交时无法获取对应数据。