一个很简单的功能实现，先看效果界面。
小程序初始界面如1，输入用户名“你是大坏蛋”，密码“wocaibushine”，点击登录效果如2所示，点击重置，效果如3所示。
新建一个小程序，建立普通快速启动模板。
所有东西都不用动，
pages/index/index.wxml代码用如下的替换：
<form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名：</label> <input name="userName" placeholder="请输入用户名！" /> </view> <view style="display:flex;"> <label>密码：</label> <input name="psw" placeholder="请输入密码！" password="true" /> </view> <view style="display:flex;margin-top:30px;"> <button style="width:30%;" formType="submit" >登录</button> <button style="width:30%" formType="reset" >重置</button> </view></form><view>{{tip}}</view><view>{{userName}}</view><view>{{psw}}</view>pages/index/index.js代码用如下的替换：
Page({ data: { // text:"这是一个页面" tip: '测试', userName: '用户名：', psw: '密码：' }, formBindsubmit: function (e) { this.setData({ tip: '结果', userName: '用户名：' + e.detail.value.userName, psw: '密码：' + e.detail.value.psw }) }, formReset: function () { this.setData({ tip: '清空了', userName: '君不见', psw: '黄河之水天上来' }) }})分析一下这两个代码。
首先是wxml，第一行，因为文本框input和按钮button都是放在了表单（form）中，所以这个首行代码几乎是固定的了。
<form bindsubmit="formBindsubmit" bindreset="formReset">bindsubmit，数据触发，bindreset表单重置。
style=”display:flex;，一行多列，把这个删掉，“用户名：”和“请输入用户名”就是两行。
password，true是隐藏密码，false是不隐藏密码。
margin-top，对象上面空出多少，30px。
formType：点击button的时候触发form组件中的事件，只有两个有效值，要么submit，要么reset。
所以说，button和input在form组件中，用法固定而单一，代码都没有什么变量。
最后，”“调用的是函数，{{}}引用的是值。
再说js文件。
代码都要写在page({})中。
data：{}给个初始化的值。
this.Data({})这也是个固定的，定义函数更新data的数据。
数据结构是json格式的。
formBindsubmit: function (e){}：定义表单中的submit函数，提交表单。
formReset: function () {}：定义表单中的reset函数，重置表单。
小程序中input和button的用法挺固定的，照着源码化用就行了。
input和button在小程序中归为表单组件。
input的官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
button的官方文档，放在了表单组件里了，
https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
