The password Type

The Current State of HTML5 Forms

<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

Chrome

Opera

IE

Android

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 autocompleteinputmodemaxlengthminlengthpatternplaceholderreadonlyrequired, and sizeInputmode and minlengthare 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.

Our Cookie Policy and Privacy Policy outline how we use cookies to help optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.