Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we take password input in HTML forms?
We use the <input> tag with the type="password" attribute to create password input fields in HTML forms. This input type automatically masks the characters with dots or asterisks as the user types, providing basic visual security for sensitive information.
Syntax
Following is the basic syntax for creating a password input field −
<input type="password" name="fieldName" id="fieldId">
The password input can also include additional attributes −
<input type="password" name="password" id="pwd" placeholder="Enter password" required>
Basic Password Input
Example
Following example demonstrates a simple login form with username and password fields −
<!DOCTYPE html>
<html>
<head>
<title>Password Input Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Login Form</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" style="padding: 5px; margin: 5px 0;"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Login" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
In this example, the password field masks the input characters, while the username field displays them normally.
Password Input with Validation
You can add various attributes to enhance password input functionality and validation −
Example
<!DOCTYPE html>
<html>
<head>
<title>Password with Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required style="padding: 5px; margin: 5px 0; width: 250px;"><br>
<label for="password1">Password:</label><br>
<input type="password" id="password1" name="password"
minlength="8" maxlength="20"
placeholder="Min 8 characters"
required
style="padding: 5px; margin: 5px 0; width: 250px;"><br>
<label for="password2">Confirm Password:</label><br>
<input type="password" id="password2" name="confirm_password"
minlength="8" maxlength="20"
placeholder="Re-enter password"
required
style="padding: 5px; margin: 5px 0; width: 250px;"><br><br>
<input type="submit" value="Register" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
This example includes password validation attributes like minlength, maxlength, required, and placeholder text to guide users.
Common Password Input Attributes
Following are the commonly used attributes with password input fields −
| Attribute | Description | Example |
|---|---|---|
name |
Specifies the name for form submission | name="password" |
id |
Unique identifier for JavaScript and CSS | id="pwd" |
placeholder |
Hint text shown when field is empty | placeholder="Enter password" |
required |
Makes the field mandatory | required |
minlength |
Minimum number of characters | minlength="8" |
maxlength |
Maximum number of characters | maxlength="20" |
autocomplete |
Controls browser auto-completion | autocomplete="new-password" |
Password Input with JavaScript
You can use JavaScript to add functionality like showing/hiding password or validating password strength.
Example − Show/Hide Password
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Password</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Visibility Toggle</h2>
<form>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"
placeholder="Enter password"
style="padding: 5px; margin: 5px 0; width: 200px;">
<button type="button" onclick="togglePassword()" style="padding: 5px; margin-left: 5px;">Show</button><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px;">
</form>
<script>
function togglePassword() {
var passwordField = document.getElementById("password");
var toggleButton = document.querySelector("button");
if (passwordField.type === "password") {
passwordField.type = "text";
toggleButton.textContent = "Hide";
} else {
passwordField.type = "password";
toggleButton.textContent = "Show";
}
}
</script>
</body>
</html>
Clicking the "Show" button toggles the password visibility, changing between masked and plain text display.
Key Points
-
Password inputs automatically mask characters with dots (?) or asterisks (*) for visual security
-
Use proper
nameandidattributes for form processing and JavaScript access -
Add
required,minlength, andmaxlengthattributes for basic validation -
Set
autocomplete="new-password"for registration forms orautocomplete="current-password"for login forms -
Always pair password fields with proper labels using the
forattribute
Conclusion
The type="password" attribute creates secure input fields that hide user input visually. Combined with validation attributes and JavaScript, you can create robust password input forms that enhance both security and user experience. Remember that password masking only provides visual protection − always implement proper server-side security for actual password handling.
7K+ Views
