Input field for PIN code
Use the type password
and HTML maxlength
property:
<input type="password" name="pin" maxlength="4">
http://jsfiddle.net/skxr9o47/
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>
http://jsfiddle.net/L6n9b5nr/
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" class="pincode" inputmode="numeric" maxlength="4">