Password Input

Learn how to implement secure password fields in HTML, understanding that masking is a visual aid rather than a security feature, and mastering the correct autocomplete attributes for modern browsers.

What it is

The <input type="password"> element creates a text field where characters are obscured (usually by dots or asterisks) as they are typed. This masking prevents shoulder surfing—someone looking over your shoulder from seeing the password—but it does not encrypt data or protect against network interception. The browser treats the value as sensitive data, which influences how autofill managers handle it.

Related terms include Autofill, Credential Management, and Shoulder Surfing.

Why it matters

• User Experience: Properly configured inputs allow browsers to save and auto-fill credentials securely, reducing friction during login.
• Privacy: Masking protects users from casual observation in public spaces.
• Security Hygiene: Using correct autocomplete values ensures passwords are stored in encrypted vaults rather than plain-text form history.
• Accessibility: Screen readers announce these fields differently, often requiring explicit labels to ensure users know what is being requested.

Syntax or steps

To create a functional password input, you need three key components: 1. An <input> tag with type="password". 2. A unique id linked to a <label> for accessibility. 3. The correct autocomplete attribute value based on context (current-password for login, new-password for registration).

Example

<form action="/login" method="POST">
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" autocomplete="username">
  </div>
  
  <div>
    <label for="password">Password</label>
    <!-- Use current-password for existing accounts -->
    <input type="password" id="password" name="password" autocomplete="current-password">
  </div>

  <button type="submit">Log In</button>
</form>

Explanation: The name="password" attribute identifies the field when submitting data. The autocomplete="current-password" tells the browser this is an existing credential, prompting it to offer saved passwords. For a signup form, you would change this to autocomplete="new-password", which instructs the browser to generate a strong suggestion or prevent autofilling old credentials.

Common mistakes

• Using autocomplete="off": Modern browsers often ignore this for password fields to improve UX. Instead, use specific values like current-password or new-password.
• Missing Labels: Relying solely on placeholders makes forms inaccessible to screen readers. Always pair inputs with visible <label> elements.
• Confusing Login vs. Signup: Using current-password on a registration page can cause browsers to autofill incorrect old passwords. Use new-password for creation flows.
• Assuming Security: Developers sometimes believe masking hides data from the DOM. It does not; the value is still accessible via JavaScript if the user has access to the console.

When to use it

Practice

Guided Exercise: Create a simple HTML form with two fields: "Email" and "Password". Set the email autocomplete to email and the password autocomplete to current-password. Ensure both have associated labels.

Challenge: Modify your form to simulate a "Sign Up" page. Change the password autocomplete value appropriately and add a second password field labeled "Confirm Password" with the same autocomplete value.

Quick check

Question: Does type="password" encrypt the data sent to the server?

Answer: No. It only masks the display in the browser. Data encryption requires HTTPS (TLS).

Summary

Password inputs provide visual privacy through masking but rely on HTTPS for actual security. Correct usage of autocomplete attributes like current-password and new-password is essential for seamless integration with browser credential managers and optimal user experience.