How do we take password input in HTML forms?

HTML Web Development Front End Technology

We use the <input> tag by assigning password to the type attribute, to take a password input in HTML form. It hides the character as soon as a we enter the characters of the password set. This is also a single-line text input.

Syntax

<form>
   <input type="password" name="name… " value=" ">Male
</form>

Example 1

An example to implement how to take a password input in HTML is as follows −


<!DOCTYPE html>
<html>
<body>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<p>Branch</p>
<form>
   <input type="password" id="CSE" name="Branch" value="CSE" >
   <label for="CSE">Enter password</label> <br>
   <input type="password" name="Branch" value="IT" >
   <label for="CSE">Re-enter password</label>
</form>
</body>
</html>

Example 2

Another example to take an input as password is given below. You can try to run the following code −


<!DOCTYPE html>
<html>
<body>
<head>
   <title>HTML Forms</title>
</head>
<p>Add your details:</p>
<form>
   Student Username:<br> <input type="text" name="name">
   <br>
   Password:<br> <input type="password" name="password">
   <br>
</form>
</body>
</html>