HTML Password Input: Syntax and Setup

An HTML password input is created with an input element whose type attribute is set to password. The browser masks the characters as the user types, but masking does not encrypt, store, or otherwise secure the password.

How do you create a basic HTML password input?

The standard syntax is <input type="password" name="password">. The password type tells the browser to conceal the entered characters on screen.

1. Add a form element that submits to your server-side handler.
2. Add a label that identifies the password field.
3. Add <input type="password"> and give the input a name.
4. Add a submit button and test the form with a keyboard as well as a screen reader.

A complete password HTML input can look like this: <form method="post"> <label for="password">Password</label> <input type="password" id="password" name="password" autocomplete="current-password" required> <button type="submit">Sign in</button> </form>.

The masked display protects the password from casual observation nearby. It does not protect the value after submission or make an unsafe connection secure.

Which attributes should an HTML password field use?

Password field attributes control how the field is identified, completed, and checked in the browser.

• type="password" masks characters during entry.
• name="password" provides the key used when the browser submits the form. Without a name, the field value is normally omitted from submitted form data.
• id="password" gives the field a unique page identifier and connects it to a label whose for value matches the ID.
• required prevents an empty field from passing built-in browser validation.
• minlength sets the minimum permitted number of characters. It is most useful when creating or changing a password.
• maxlength sets the maximum number of characters accepted. Avoid an unnecessarily low limit, and make the server enforce the same documented rule.
• autocomplete tells browsers and password managers what kind of password the field expects.
• placeholder displays temporary hint text inside the field. A placeholder is not a replacement for a visible label.

Use attributes as separate name-and-value pairs inside the opening input element. Do not put minlength or autocomplete inside the type value.

How do you label a password input for accessibility?

Use an explicit label with a for attribute that exactly matches the password input's id. For example: <label for="account-password">Password</label> <input id="account-password" name="password" type="password">.

Put password requirements in visible text before or beside a new-password field. If the instructions need a programmatic connection, give the instruction text an id and reference that id with aria-describedby on the input.

When validation fails, identify the problem in plain language, place the message near the field, and connect it with aria-describedby. Move focus to the first invalid field or provide a clear error summary so keyboard users can find the problem.

Do not depend on color, placeholder text, or an icon alone. Keep the field reachable in the normal Tab order, preserve a visible focus indicator, and give any show-password control a clear text label and keyboard operation.

Should autocomplete be current-password or new-password?

Use autocomplete="current-password" when the user enters an existing password to sign in or confirm identity. This value helps the browser or password manager select a saved credential.

Use autocomplete="new-password" when the user creates or changes a password. This value tells password managers that the field expects a new credential and may allow them to suggest a strong password.

• Sign-in form: use username for the account-name field and current-password for the existing password field.
• Registration form: use new-password for the password field and for a confirmation field when one is required.
• Password-change form: use current-password for the old password and new-password for the replacement password.

Avoid autocomplete="off" as a security measure. Browsers and password managers may ignore it for credentials, and blocking password tools can make strong, unique passwords harder to use.

Does browser validation make a password input secure?

Browser-side validation gives immediate feedback, but users and automated requests can bypass it. Attributes such as required, minlength, and maxlength improve the form experience; they are not a security boundary.

The server must validate every submitted value again. Secure server-side handling should use an encrypted connection, established password-hashing methods, safe session controls, rate limiting, and careful error messages. Do not store passwords as plain text, print them in logs, or return them in page markup.

Apply consistent length rules in the browser and on the server. Treat the received password as untrusted input even when the HTML field has validation attributes.

Why is an HTML password input not working?

• If characters are visible, confirm that the input uses type="password" rather than type="text". Also check whether page scripts are intentionally switching the type for a show-password feature.
• If the submitted password is missing, add a name attribute and confirm that the input is inside the submitted form. Disabled inputs are not included in normal form submission.
• If required or minlength appears ineffective, check the attribute spelling and test through a normal form submission. Code that bypasses browser validation can also bypass these checks.
• If autocomplete selects the wrong credential, use current-password for an existing password and new-password for a replacement. Give related username and password fields accurate autocomplete values.
• If clicking the label does not focus the field, make the label's for value identical to the input's unique id.
• If a screen reader announces only “edit” or reads unclear instructions, add a visible label and programmatically connect any requirements or validation message to the field.

Inspect the final rendered HTML when troubleshooting. Templates and scripts can remove a name, duplicate an id, change the input type, or place the field outside the intended form.