<div>  <label for="username">Username:</label>  <input type="text" name="username" /></div><div>  <label for="pass">Password (8 characters minimum):</label>  <input type="password" name="password" minlength="8" required /></div><input type="submit" value="Sign in" />

label {  display: block;}input[type="submit"],label {  margin-top: 1rem;}

The precise behavior of the entry process may vary from browser to browser.Some browsers display the typed character for a moment before obscuring it, while others allow the user to toggle the display of plain-text on and off.Both approaches help a user check that they entered the intended password, which can be particularly difficult on mobile devices.

Thevalue attribute contains a string whose value is the current contents of the text editing control being used to enter the password. If the user hasn't entered anything yet, this value is an empty string (""). If therequired property is specified, then the password edit box must contain a value other than an empty string to be valid.

If thepattern attribute is specified, the content of apassword control is only considered valid if the value passes validation; seeValidation for more information.

In addition to theglobal attributes, and the attributes that operate on all<input> elements regardless of their type, password field inputs support the following attributes.

The maximum string length (measured inUTF-16 code units) that the user can enter into the password field. This must be an integer value of 0 or higher. If nomaxlength is specified, or an invalid value is specified, the password field has no maximum length. This value must also be greater than or equal to the value ofminlength.

The input will failconstraint validation if the length of the text entered into the field is greater thanmaxlengthUTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

The minimum string length (measured inUTF-16 code units) that the user can enter into the password entry field. This must be a non-negative integer value smaller than or equal to the value specified bymaxlength. If nominlength is specified, or an invalid value is specified, the password input has no minimum length.

The input will failconstraint validation if the length of the text entered into the field is fewer thanminlengthUTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

Thepattern attribute, when specified, is a regular expression that the input'svalue must match for the value to passconstraint validation. It must be a valid JavaScript regular expression, as used by theRegExp type, and as documented in ourguide on regular expressions; the'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of asASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. With a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. See the sectionValidation for details and an example.

Theplaceholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The textmust not include carriage returns or line feeds.

If the control's content has one directionality (LTR orRTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; seeHow to use Unicode controls for bidi text for more information.

A Boolean attribute which, if present, means this field cannot be edited by the user. Itsvalue can, however, still be changed from JavaScript code that directly sets the value of theHTMLInputElement.value property.

Thesize attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This doesnot set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use themaxlength attribute.

Password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.

Here we see the most basic password input, with a label established using the<label> element.

<label for="userPassword">Password: </label><input type="password" />

To allow the user's password manager to automatically enter the password, specify theautocomplete attribute. For passwords, this should typically be one of the following:

on

Allow the browser or a password manager to automatically fill out the password field. This isn't as informative as using eithercurrent-password ornew-password.

off

Don't allow the browser or password manager to automatically fill out the password field. Note that some software ignores this value, since it's typically harmful to users' ability to maintain safe password practices.

current-password

Allow the browser or password manager to enter the current password for the site. This provides more information thanon does, since it lets the browser or password manager automatically enter currently-known password for the site in the field, but not to suggest a new one.

new-password

Allow the browser or password manager to automatically enter a new password for the site; this is used on "change your password" and "new user" forms, on the field asking the user for a new password. The new password may be generated in a variety of ways, depending on the password manager in use. It may fill in a new suggested password, or it might show the user an interface for creating one.

<label for="userPassword">Password:</label><input type="password" autocomplete="current-password" />

To tell the user's browser that the password field must have a valid value before the form can be submitted, specify the Booleanrequired attribute.

<label for="userPassword">Password: </label><input type="password" required /><input type="submit" value="Submit" />

If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use theinputmode attribute to request a specific one. The most obvious use case for this is if the password is required to be numeric (such as a PIN). Mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier. If the PIN is for one-time use, set theautocomplete attribute to eitheroff orone-time-code to suggest that it's not saved.

<label for="pin">PIN: </label><input type="password" inputmode="numeric" />

As usual, you can use theminlength andmaxlength attributes to establish minimum and maximum acceptable lengths for the password. This example expands on the previous one by specifying that the user's PIN must be at least four and no more than eight digits. Thesize attribute is used to ensure that the password entry control is eight characters wide.

<label for="pin">PIN:</label><input   type="password"  inputmode="numeric"  minlength="4"  maxlength="8"  size="8" />

As with other textual entry controls, you can use theselect() method to select all the text in the password field.

HTML

<label for="userPassword">Password: </label><input type="password" size="12" /><button>Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {  document.getElementById("userPassword").select();};

Result

You can also useselectionStart andselectionEnd to get (or set) what range of characters in the control are currently selected, andselectionDirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). However, given that the text is obscured, the usefulness of these is somewhat limited.

If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use thepattern attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.

In this example, only values consisting of at least four and no more than eight hexadecimal digits are valid.

<label for="hexId">Hex ID: </label><input   type="password"  pattern="[0-9a-fA-F]{4,8}"  title="Enter an ID consisting of 4-8 hexadecimal digits"  autocomplete="new-password" />

This example only accepts input which matches the format for avalid United States Social Security Number. These numbers, used for tax and identification purposes in the US, are in the form "123-45-6789". Assorted rules for what values are permitted in each group exist as well.

HTML

<label for="ssn">SSN:</label><input  type="password"   inputmode="numeric"  minlength="9"  maxlength="12"  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"  required  autocomplete="off" /><br /><label for="ssn">Value:</label><span></span>

This uses apattern which limits the entered value to strings representing legal Social Security numbers. Obviously, this regexp doesn't guarantee a valid SSN (since we don't have access to the Social Security Administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. In addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing.

Theinputmode is set tonumeric to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. Theminlength andmaxlength attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). Therequired attribute is used to indicate that this control must have a value. Finally,autocomplete is set tooff to avoid password managers and session restore features trying to set its value, since this isn't a password at all.

JavaScript

The JavaScript displays the entered SSN onscreen so you can see it. This defeats the purpose of a password field, but it helps experiment with thepattern.

const ssn = document.getElementById("ssn");const current = document.getElementById("current");ssn.oninput = (event) => {  current.textContent = ssn.value;};

Result