We all see those fields that mask (or hide) data while you type, specifically Password Fields. Each character you type is replaced with a symbol, tipycally an asterisk or a small circle, or a small square (depending on the browser you’re using).
We all know what they are, why they’re useful (keeping sensitive data such as your password from prying eyes), but have you ever wondered how to create one? Well, today I’m going to provide a step-by-step guide on how to create a password field for your web page.
Open your web page (or create a new one) in your HTML editor.
Insert the following code in the BODY section, where you want the password field to appear:
<input type=”password” name=”password” size=”20″>
The full example code will be as follows:
<html>
<head>
<title>vaccino.com login</title>
</head>
<body>
<font face=”Arial”>
<h1>Admin Login</h1>
<hr>
<form action=”form.php”>
User name:
<br>
<input type=”text” name=”username” size=”20″>
<br>
Password:
<br>
<input type=”password” name=”password” size=”20″>
<br>
<hr>
<input type=”submit” value=”Login”>
<input type=”reset” value=”Clear”>
</form>
</font>
</body>
</html>
Save your page and open it in your browser. It will look like this:
