WeChat applet - how to get the value entered by the user in the text box

Let's take the simple and commonly used login as an example. Let's look at the final effect picture first.

I don't like to use from form submission, so I don't use form submission method here;

First look at the html code:

login.wxml

<view class="itemView">Username:
    <input class="input" name="userName" placeholder="Please enter username"
    bindinput ="userNameInput"/>
  </view>
<view class="itemView">Password:
    <input class="input" password placeholder="Please enter password"
     bindinput="passWdInput" />
  </view>
<view class="viewName" style="background-color:#fbf9fe">
  <button class="loginBtn" bindtap="loginBtnClick">登录</button>
</view>

Looking at the js code:

login.js

// pages/index/login.js
Page({
  data: {
    userName: '',
    userPwd:""
  },
  //Get the username entered by the user
  userNameInput:function(e)
  {
    this.setData({
      userName: e.detail.value
    })
  },
  passWdInput:function(e)
  {
    this.setData({
      userPwd: e.detail.value
    })
  },
  //Get the password entered by the user
  loginBtnClick: function (e) {
    console.log("Username: "+this.data.userName+" Password: " +this.data.userPwd);
  }
  ,
  // The user clicks on the upper right corner to share
  onShareAppMessage: function () {

  }
})