How do you make an <input> for entering a password?
To create a password entry field, use the <input> element with the
type="password" attribute.
Such a field hides the entered characters, replacing them with dots or asterisks, so no one can see the password visually.
1. Basic password field example
<form action="/login" method="post">
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" placeholder="Enter your password">
<button type="submit">Log in</button>
</form>What happens here:
type="password"makes the characters invisible while typing;name="password"is the field's name (sent to the server on form submit);placeholderis a hint inside the field;idandlabellink the caption and the input field.
2. How it works
While typing, the user sees:
••••••••But the browser actually sends the entered text as a plain string (for example, mypassword123).
The hiding is purely visual, not encryption.
3. Commonly used attributes
| Attribute | Purpose | Example |
|---|---|---|
name | Field name (key for sending) | name="password" |
placeholder | Hint | placeholder="Enter your password" |
required | Makes the field mandatory | required |
minlength / maxlength | Minimum / maximum characters | minlength="6" maxlength="20" |
autocomplete | Allows or blocks autofill | autocomplete="off" |
pattern | Validates against a pattern (regular expression) | pattern=".{6,}" (at least 6 characters) |
Example with validation:
<input type="password" name="password" minlength="6" required placeholder="At least 6 characters">4. How to add a "show password" toggle
You can build a toggle using JavaScript:
<input type="password" id="password" placeholder="Enter your password">
<input type="checkbox" id="show"> Show password
<script>
document.getElementById('show').addEventListener('change', function() {
const input = document.getElementById('password');
input.type = this.checked ? 'text' : 'password';
});
</script>Now clicking the checkbox switches the field's type between password and text.
5. Security
- The characters are hidden only on screen, not in transit; real protection must be implemented on the server (via HTTPS and password hashing).
- Never store entered passwords in plain text.
Summary:
| Property | Value |
|---|---|
| Tag | <input type="password"> |
| Purpose | Field for secure password entry |
| Characters while typing | Hidden (dots / asterisks) |
| Commonly used attributes | required, minlength, autocomplete="off", placeholder |
| Security | Visual hiding; real protection is on the server side |
In simple terms:
<input type="password"> is a field where the input is visible only to the user.
It creates an illusion of "secret" entry and makes a login form look visually secure.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.