The Current State of HTML5 Forms

The password Type

<input type=password>
<input type=password placeholder="********" 
    pattern="\w{8}" title="8 character password">
<input type=text style="-webkit-text-security: circle;">

Live Demo




Firefox
Safari
Safari Mobile
Chrome
Opera
IE
Android
Supported Supported Supported Supported Supported Supported Supported

The Low Down

The password input type is used to create an obscured text control.

  • Other than dirname and list, the password input type accepts the same attributes as the text input type: you can basically use password for any input control where you want to obscure the content the user enters.
  • Attributes supported in theory by the password input type include autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size. Inputmode and minlength are not yet supported in any browser. Autocomplete should be set to off: autocomplete="off".
  • When a dynamic keypad is used for data entry, many browsers will temporarily display each character as it is entered for better user experience (it's easy to typo when a key is so tiny).
  • To make any non-GUI input type appear obfuscated in Safari, Opera and Chrome you can include -webkit-text-security with the value of disc, circle, square, or none. This will not alter the appearance of the password input type, however, because of the inclusion of
    input[type="password"] { -webkit-text-security: disc !important;}
    in the User Agent stylesheet. While you can overwrite CSS in your UA StyleSheet, you can't overwrite any !important found there. Example
  • What obfuscated, the password input type is not actually secure. The value is passed unobfuscated and not encrypted, so always, at minimum, use method="post" over SSL.