Article Categories

Selected Reading

How to Hide Password in HTML?

HTML Web Development Front End Technology

In HTML forms, hiding passwords is crucial for protecting user credentials from visual exposure. The standard approach uses the type="password" attribute, which automatically masks password characters as dots or asterisks. This prevents shoulder surfing and accidental password exposure while maintaining usability.

Syntax

Following is the basic syntax for creating a password input field

<input type="password" name="password" id="password" placeholder="Enter your password">

The type="password" attribute tells the browser to mask the input characters, replacing them with dots or asterisks as the user types.

Default Password Field Behavior

HTML password fields provide built-in security by visually obscuring entered characters. This default behavior prevents casual observation of passwords during input.

Example

Following example shows a basic password field implementation

<!DOCTYPE html>
<html>
<head>
   <title>Basic Password Field</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Login Form</h2>
   <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" style="margin: 10px; padding: 8px;"><br>
      
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" placeholder="Enter your password" style="margin: 10px; padding: 8px;"><br>
      
      <input type="submit" value="Login" style="margin: 10px; padding: 8px 20px;">
   </form>
</body>
</html>

The password field automatically masks characters as they are typed. The actual password text remains hidden from view while preserving the form's functionality

Username: [text input field]
Password: [????????] (masked characters)
[Login Button]

Show/Hide Password Toggle

A toggle button allows users to temporarily view their password to verify accuracy. This feature improves usability while maintaining security by requiring an explicit action to reveal the password.

Example

Following example implements a password visibility toggle

<!DOCTYPE html>
<html>
<head>
   <title>Password Toggle Example</title>
   <style>
      .password-container {
         position: relative;
         display: inline-block;
      }
      .password-input {
         padding: 10px 45px 10px 10px;
         border: 2px solid #ccc;
         border-radius: 4px;
         font-size: 16px;
         width: 250px;
      }
      .toggle-btn {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
         background: none;
         border: none;
         cursor: pointer;
         font-size: 12px;
         color: #007bff;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Password with Toggle</h2>
   <form>
      <label for="password">Password:</label><br>
      <div class="password-container">
         <input type="password" id="password" name="password" class="password-input" placeholder="Enter password">
         <button type="button" class="toggle-btn" onclick="togglePassword()">Show</button>
      </div>
   </form>
   
   <script>
      function togglePassword() {
         const passwordField = document.getElementById('password');
         const toggleBtn = document.querySelector('.toggle-btn');
         
         if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleBtn.textContent = 'Hide';
         } else {
            passwordField.type = 'password';
            toggleBtn.textContent = 'Show';
         }
      }
   </script>
</body>
</html>

The toggle button switches between type="password" and type="text" to control visibility. Clicking "Show" reveals the password, while "Hide" masks it again.

Password: [????????] [Show]
         (or)
Password: [mypassword] [Hide]

Styling Password Fields

Custom CSS styling improves the visual appearance of password fields while maintaining their security functionality. Styling helps integrate password fields seamlessly into your website's design.

Example

Following example demonstrates custom password field styling

<!DOCTYPE html>
<html>
<head>
   <title>Styled Password Field</title>
   <style>
      .form-group {
         margin-bottom: 20px;
      }
      .styled-password {
         width: 100%;
         max-width: 300px;
         padding: 12px 16px;
         border: 2px solid #e1e5e9;
         border-radius: 8px;
         font-size: 16px;
         transition: all 0.3s ease;
         background-color: #f8f9fa;
      }
      .styled-password:focus {
         outline: none;
         border-color: #007bff;
         background-color: white;
         box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
      }
      .styled-password::placeholder {
         color: #6c757d;
         font-style: italic;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 30px; background-color: #f5f5f5;">
   <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
      <h2 style="margin-bottom: 20px; color: #333;">Secure Login</h2>
      <form>
         <div class="form-group">
            <label for="username" style="display: block; margin-bottom: 5px; font-weight: bold;">Username:</label>
            <input type="text" id="username" name="username" class="styled-password" placeholder="Enter your username">
         </div>
         <div class="form-group">
            <label for="password" style="display: block; margin-bottom: 5px; font-weight: bold;">Password:</label>
            <input type="password" id="password" name="password" class="styled-password" placeholder="Enter your password">
         </div>
         <input type="submit" value="Login" style="background: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer;">
      </form>
   </div>
</body>
</html>

The styled password field includes focus effects, custom colors, and smooth transitions while maintaining password masking functionality.

Enhanced Toggle with Icons

Using eye icons instead of text provides a more intuitive toggle experience. This approach is commonly used in modern web applications.

Example

Following example uses Unicode eye symbols for the toggle button

<!DOCTYPE html>
<html>
<head>
   <title>Icon-Based Password Toggle</title>
   <style>
      .password-wrapper {
         position: relative;
         display: inline-block;
         margin: 20px 0;
      }
      .password-field {
         padding: 12px 50px 12px 12px;
         border: 1px solid #ddd;
         border-radius: 6px;
         font-size: 16px;
         width: 280px;
      }
      .eye-icon {
         position: absolute;
         right: 15px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
         font-size: 20px;
         color: #666;
         user-select: none;
      }
      .eye-icon:hover {
         color: #333;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 30px;">
   <h2>Password with Icon Toggle</h2>
   <form>
      <label for="userpass">Enter Password:</label><br>
      <div class="password-wrapper">
         <input type="password" id="userpass" name="userpass" class="password-field" placeholder="Your secure password">
         <span class="eye-icon" onclick="togglePasswordVisibility()">?</span>
      </div><br>
      <input type="submit" value="Submit" style="padding: 10px 20px;">
   </form>
   
   <script>
      let isPasswordVisible = false;
      
      function togglePasswordVisibility() {
         const passwordInput = document.getElementById('userpass');
         const eyeIcon = document.querySelector('.eye-icon');
         
         if (isPasswordVisible) {
            passwordInput.type = 'password';
            eyeIcon.textContent = '?';
            isPasswordVisible = false;
         } else {
            passwordInput.type = 'text';
            eyeIcon.textContent = '?';
            isPasswordVisible = true;
         }
      }
   </script>
</body>
</html>

The eye icon changes from open (?) to closed (?) when toggled, providing clear visual feedback about the password visibility state.

Security Best Practices

When implementing password fields, follow these essential security guidelines

Practice	Implementation
Use HTTPS	Always transmit passwords over encrypted connections to prevent interception.
Server-side Hashing	Hash and salt passwords before storing them in databases.
Client-side Validation	Implement password strength requirements (length, complexity).
Autocomplete Control	Use `autocomplete="current-password"` for login forms.
Accessibility	Ensure screen readers can properly identify password fields.

Use secure protocols Always use HTTPS to encrypt data transmission between client and server.
Implement server-side validation Validate password criteria on the server regardless of client-side hiding.
Consider accessibility Ensure password fields work with screen readers and assistive technologies.
Avoid plain text storage Never store passwords in plain text; always use proper hashing algorithms.

Mrudgandha Kulkarni

Updated on: 2026-03-16T21:38:54+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next