I want to create a form, where user can enter Email and 4 digit PIN. For PIN input I would like to use <input type="number"> instead of regex, but I don't know how to hide entered digits.
4 Answers
Use the type password and HTML maxlength property:
<input type="password" name="pin" maxlength="4"> This would require some JavaScript validation to ensure a number was entered.
An alternative way would be to use HTML 5 and take advantage of the number type (As you already have done) or the pattern attribute and validate it inside your form.
<form> <input type="text" name="pin" pattern="[0-9]{4}" maxlength="4"> <input type="submit" value="Validate"> </form> However, you would have to use JavaScript or jQuery to use mask the user's input.
Use inputmode numeric and password input
For Android and iOS you can also add inputmode="numeric" to an input type="password". The user will get a keyboard with only numbers (the same keyboard as used for the input type="tel"). Example:
<input name="pincode" type="password" inputmode="numeric" maxlength="4"> Use a style and text input
Another option that doesn't work in every browser, is to hide the digits via the style in an input type="text". Example:
<style> .pincode { text-security: disc; -webkit-text-security: disc; -moz-text-security: disc; } </style> <input name="pincode" type="text" inputmode="numeric" maxlength="4"> if you use the input field with password type, the digit should be shown as bullet points instead of the actual number.
<form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> I feel like no one actually fully answered the question, I've combined this code from multiple posts regarding this questions and this is what I use. 4 digit max, hidden input, only numbers and number pad is showing on both android and ios.
<input type="number" name="password" pattern="[0-9]{4}" maxlength="4" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />Note that -webkit-text-security is not supported in Firefox or IE.
