Input Field for Pin Code
I Want to Create a Form, Where User Can Enter Email and 4 Digit Pin. for Pin Input I Would Like to Use Instead of Regex, but I Don't Know How to Hide Entered...
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">
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
