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">

Tags:

Html

Css