HTML Password Input is used in a web app when there any registration and logging process involved. It’s easy to use, you just need to use <input> tag with a type=”password” attribute.
This Tutorial you will learn how to create an HTML input field, show it, get the value and placeholder with examples.
Syntax
A simple syntax of html password input type.
<input type="password">HTML Password Field Example
You just need to write type=”password” in <input> tag, same as a Text box, Checkbox
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Type Passowrd</h2>
<label for="name">Enter Password:</label>
<input type="password" id="pass" name="pass">
</body>
</html>
Output: See the below GIF file, how password filed will show in browser.
Show Password Text |Characters
Some time user put the wrong password many times. That you need to show html password input show text value to know the user what he is entering. A password field show characters will not do the first time or direct every time. There should be some button where the user can click on an icon or text button which indicates to click and see password characters.
To get it done you have to use the javascript function. Where the type of attribute will change to Password to Text using a Radio button.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Type Passowrd</h2>
Enter Password: <input type="password" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>Output: See in Gif output how to
Placeholder | Hint for user
A placeholder in the HTML password input box show hint (what content will come here) to the user. It’s as easy as just writing a placeholder attribute with a value in the <input> tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Type Passowrd</h2>
<label for="name">Enter Password:</label>
<input type="password" id="pass" name="pass" placeholder="Password">
</body>
</html>Output: How’s look password hint in input password box.
Value | How to Get
Without getting the html password input value, you can do nothing. So how you will get the input password value in HTML?
See the below example for that. Using a button to trigger a javascript function gets the value of a
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Type Passowrd</h2>
Enter Password: <input type="password" id="myInput"><br><br>
<button onclick="myFunction()">Get the value</button>
<p id="passValue"></p>
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("passValue").innerHTML = x;
}
</script>
</body>
</html>Output: See the GIF image how it is working.
Do comment if you have any suggestion and doubt on this tutorial,
Note: TheAll HTML Input Password Box Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version