详解微信小程序文本框（label/input）、按钮（button）用法，以登陆界面为例

一个很简单的功能实现，先看效果界面。

小程序初始界面如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