Hey friends, today in this blog you’ll learn Login Form Using Html Css Js | Password Show and Hide Using Javascript . We’ll use Html Css & Javascript to create this Awesome Login Form . Earlier I’ve shared a blog on How to Create a Social Media Login Form Using Html & Css .
This login Form Is Completely responsive Form All Devices Like Mobile , Laptop , Tablets etc. In This Login Form Us will Show And Hide Password with the help oh javascript.
If You have any Problem so, I Also Created a full video tutorial on this Login Form Using Html Css Js you can see this tutorial .
Video Tutorial of ” Login Form Using Html Css Js “
You might like this:
- Responsive Image Slider
- Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- How to Create Resume CV Website Using HTML CSS Bootstrap4
Login Form Using Html Css Js [Source Codes]
To create this Login Form First, you need to create Three files, HTML File ,CSS File & JS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Login Form Using Html Css Js | Password Show and Hide Using Javascript from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<div class="container">
<div class="img">
<img src="img/BG.png" alt="BG">
</div>
<div class="login-content">
<form action="#">
<div class="title-container">
<h1>Login</h1>
<h2>Hello, Friends!</h2>
<p>Enter your personal detail and start journey with us.</p>
</div>
<div class="login-inner-content">
<div class="input-div one">
<div class="i">
<i class="far fa-user-circle"></i>
</div>
<div class="div">
<h5>User id</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-eye" onclick="show()"></i>
</div>
<div class="div">
<h5>Password</h5>
<input id="pswrd" type="password" class="input">
</div>
</div>
<a href="#">Forgot password / Username</a>
</div>
<input type="submit" class="btn" value="Login">
<h5>Not a member ? <a href="#">Create Account</a></h5>
</form>
</div>
</div>
# CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* coding with nick */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
a{
text-decoration: none;
color: unset;
}
a:hover{
color: #3ac6e1 !important;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0 2rem;
}
.img{
width: 100%;
height: 100vh;
display: flex;
justify-content: flex-end;
align-items: center;
}
.img img{
width: 500px;
}
.login-content{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title-container{
text-align: left;
padding-bottom: 40px;
}
.title-container h1{
color: #3ac6e1;
font-size: 30px;
font-weight: 600;
}
.title-container h2{
font-size: 30px;
font-weight: 600;
text-transform: none;
margin: 2px 0;
}
.title-container p{
font-size: 15px;
font-weight: 500;
color: #c0c0c0;
}
.login-inner-content{
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
border-radius: 10px;
box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.10);
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 5px;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 15px;
transition: .3s;
font-weight: 500;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #3ac6e1;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: 3px;
font-size: 10px;
font-weight: 500;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 15px;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass{
margin-bottom: 4px;
}
.login-inner-content a{
display: block;
text-align: right;
color: rgb(0, 0, 0);
margin-top: 10px;
font-size: 10px;
font-weight: 600;
transition: .3s;
}
.btn{
display: block;
width: 100%;
height: 50px;
border-radius: 50px;
outline: none;
border: none;
background-image: linear-gradient(to right, #5bdffa, #36cbe9, #5bdffa );
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'poppins',sans-serif;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover{
background-position: right;
}
h5{
font-size: 12px;
font-weight: 600;
}
/* Mobile Responsive */
@media screen and (max-width: 1050px){
.container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
.title-container h2{
font-size: 25px !important;
}
form{
width: 290px;
}
.login-content h2{
font-size: 2.4rem;
margin: 8px 0;
}
.img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
.container{
grid-template-columns: 1fr;
}
.img{
display: none;
}
.login-content{
justify-content: center;
}
}
# JS CODE
Third, you create a JavaScript file (music-list.js) and paste the given codes in your JavaScript file.
// coding with nick
const inputs = document.querySelectorAll(".input");
function addcl(){
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl(){
let parent = this.parentNode.parentNode;
if(this.value == ""){
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl)
});
// See Password
function show() {
var pswrd = document.getElementById('pswrd');
var icon = document.querySelector('.fas');
if (pswrd.type === "password") {
pswrd.type = "text";
icon.style.color = "#4dd8f3";
} else{
pswrd.type = "password";
icon.style.color = "#d9dde4";
}
}
That’s all, now you’ve successfully created aLogin Form Using Html Css Js . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
