input type=number for username login and saving password

Question

Consider this form

<form action="/user" method="post" accept-charset="UTF-8"><div>
<input placeholder="Mobile number" name="name" value="" size="60" maxlength="60" type="number">
<input placeholder="Password" type="text" name="pass" size="60" maxlength="128" autocomplete="off">
<input type="submit" name="op" value="LOGIN">
</form>

In my app, I use phone number for the user's login. I want to have the number keypad show for this input so instead of input type=text we use input type=number

However, this is causing issues with certain browsers seemingly not recognizing this field as a username, and so it is no longer providing a dropdown autocomplete in username and populating the below input type=password when I am on chrome mobile.

The dropdown autocomplete username, which populates the password is visible and working on Chrome desktop but not Chrome mobile.

Answer 1

You need to add the autocomplete attribute to help the browsers understand what is going on. This should help out.

<div class="md-form">
   <input type="tel" class="form-control validate" name="Username" tabindex="20"
                        autocomplete="username" required autofocus>
   <label for="Username">Username</label>
</div>

I am not sure what extension I have installed in VS Code, but as I type the attribute it then gives me possible values to drive this.

You should also note you can add an aria attribute around this as well. For that you may need to add a list of options, I have not checked into how to drive that.