Make Toggle Password Visibility
In this article, I am going to tell you how you can create a very beautiful Make Toggle Password Visibility with simple steps. you just need to write a simple code of text to create this HTML Make Toggle Password Visibility in HTML CSS. We will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save file of code and then drag it or open it on your text editor, after that, you have to save this file by giving any name with the extension name .html.
after saved this file, you just write a simple structure of HTML and create content and follow the code which is given below.
Queries Solved:-
login form in html and css,login form,how to create login form in html,login form html css,html login form,login form design,login form in html,login form in html css,transparent login form html css,login form using html and css,animated login form html css,css login form,html css login form,how to make login form in html,how to create form in html,login and registration form in html and css,login form in html and css and javascript,html and css,
how to toggle password visibility,password toggle with javascript,show password eye icon html,html,password toggle tutorial,toggle show and hide password in javascript,password show button html css javascript,show and hide password using javascript,password,show password eye icon javascript,show/hide password javascript,how to toggle password visibility with vanilla javascript,mask unmask password,how to display password in a form input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700;900&family=Poppins:wght@100;200;300;500&display=swap" rel="stylesheet">
<style type="text/css">
*
{
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
color: #ccc;
}
body
{
width: 100%;
height: 100vh;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
form
{
background: #1d1e22;
padding: 40px 30px 60px 30px;
border-radius: 9px;
}
form h2
{
text-align: center;
font-weight: 300;
font-size: 30px;
margin-bottom: 10px;
}
form label
{
font-size: 14px;
font-weight: 300;
}
form div input
{
width: 240px;
height: 34px;
outline: none;
padding: 0px 10px;
color: #ef3b3a;
margin-bottom: 5px;
}
form input[type="checkbox"]
{
margin-right: 5px;
cursor: pointer;
}
form span
{
color: #ef3b3a;
font-weight: 300;
font-size: 14px;
}
form button
{
width: 100%;
background: #ef3b3a;
padding: 10px 0px;
border: none;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h2>Login Form</h2>
<div>
<label>Username:</label><br>
<input type="text" name="username"><br>
<label>Password:</label><br>
<input type="password" name="Password" id="myInput"><br>
</div>
<input type="checkbox" name="" onclick="myfunction()">
<span>Show Password</span><br>
<button>Login</button>
</form>
<script type="text/javascript">
function myfunction() {
var x =document.getElementById('myInput');
if (x.type==="password") {
x.type = "text";
}
else
{
x.type = "password";
}
}
</script>
</body>
</html>Here we completed our tutorial.
If you face any problem please feel free to contact us.
If you like our article please share it with your friends and relatives.
Thanks for reading our article.
Read Also:-
Website Template in HTML and CSS
Make Navbar Shrink Effect in HTML and CSS
Queries Solved:-
login form in html and css,login form,how to create login form in html,login form html css,html login form,login form design,login form in html,login form in html css,transparent login form html css,login form using html and css,animated login form html css,css login form,html css login form,how to make login form in html,how to create form in html,login and registration form in html and css,login form in html and css and javascript,html and css,
how to toggle password visibility,password toggle with javascript,show password eye icon html,html,password toggle tutorial,toggle show and hide password in javascript,password show button html css javascript,show and hide password using javascript,password,show password eye icon javascript,show/hide password javascript,how to toggle password visibility with vanilla javascript,mask unmask password,how to display password in a form input
