Learn How to Create Login Form Using HTML and CSS (Javascript)
This Tutorial will teach you, How to Create Sign In /Login form using html and css and This tutorial will also teach you how you can add JavaScript in forms and make them more attractive and good.
Video Tutorial
Codes are available for free, you can use these codes for free.
Output :
HTML, CSS and JavaScript Code
<html>
<head>
<title>Cobra Kai</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #0e0e0e;
}
nav{
border-bottom:solid 5px #e50303;
}
ul{
padding
list-style: none;
padding: 20px;
}
li{
display: inline-block;
color: #e50303;
padding-left: 20px;
font-size: 18px;
font-family: Arial;
}
.form-container{
background-color: #e50303;
margin: 9%;
padding:30px;
margin-left:30%;
margin-right:30%;
}
input{
border: none;
font-size: 31px;
padding: 3px;
width:100%;
}
h1{
color: white;
text-align: center;
font-size: 41px;
font-family: Arial;
}
label{
color: white;
letter-spacing: 1px;
font-size: 18px;
font-family: Arial;
}
.sign-in{
text-align: center;
border: none;
padding: 16px;
font-size: 18px;
letter-spacing: 1px;
background-color:white;
}
p, p > a{
color: white;
font-family: Arial;
text-decoration: none;
}
p > a:hover{
color: white;
font-family: Arial;
text-decoration: underline;
}
.jam{
display:none;
}
.create-acc{
margin-top:-90px;
text-align: center;
margin-left: 43%;
border: none;
padding: 16px;
font-size: 18px;
letter-spacing: 1px;
background-color:white;
padding-left: 34px;
padding-right: 34px;
}
.overlay {
height: 90%;
width: 100%;
background-color: #0e0e0e;
overflow-y: hidden;
transition: .5s;
transition-delay:1s;
}
.overlay-content {
width: 100%;
}
img{
width: 50%;
margin-left: 25%;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="myNav" class="overlay" onclick="document.getElementById('demo').style.display='block'">
<div class="overlay-content" >
<img id="myImage" src="https://image.ibb.co/edHdkT/ss2.jpg" onclick="closeNav()">
</div>
</div>
<audio id="myAudio">
<source src="file:///F:/YouTube/youtube%20music/effects/Dumpster_Rattle.mp3" type="audio/mpeg">
</audio>
<div class="jam" id="demo">
<div class="form-container">
<form>
<h1>Sign In</h1>
<br/>
<label>Username</label>
<br/>
<input type="text">
<br/>
<br/>
<label>Password</label>
<br/>
<input type="password">
<br/>
<br/>
<br/>
<button type="submit" class="sign-in">Sign In</button>
<br/>
<br/>
<p><a href="#">Forgot Password?</a></p>
</form>
</div>
<button type="submit" class="create-acc">Create Account</button>
</div>
<script>
function closeNav() {
document.getElementById('myImage').src='https://image.ibb.co/iofW5T/ss.jpg';
var x = document.getElementById("myAudio");
x.play();
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
HTML and CSS Code Only
<!DOCTYPE html>
<html>
<head>
<title>Cobra Kai</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
:root{
--blacky: #0e0e0e;
--redy: #e50303;
}
body{
background-color: var(--blacky);
font-family: Arial;
}
ul{
list-style: none;
}
nav{
border-bottom: solid 5px var(--redy);
}
nav ul li{
display: inline-block;
padding: 20px;
color: var(--redy);
}
.main-container{
background-color: var(--redy);
margin-left: 30%;
margin-right: 30%;
margin-top: 6%;
padding: 30px;
}
h1{
color: white;
padding: 40px;
text-align: center;
}
label{
font-size: 24px;
color: white;
}
input{
font-size: 24px;
padding: 5px;
outline: none;
width: 100%;
}
.btn-signin{
font-size: 24px;
padding: 5px;
outline: none;
background-color: white;
color: var(--blacky);
border: none;
}
.btn-create-account{
font-size: 24px;
padding: 10px;
outline: none;
background-color: white;
color: var(--blacky);
border: none;
margin-left: 44%;
}
</style>
</head>
<body>
<!---Creating Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>
<!--Creating Form -->
<div class="container">
<div class="main-container">
<h1>Sign in</h1>
<form>
<label>Username</label>
<br/>
<input type="text">
<br/><br/>
<label>Password</label>
<br/>
<input type="Password">
<br/><br/>
<button type="submit" class="btn-signin">Sign in</button>
</form>
</div>
</div>
<!--Creating Create Account Button -->
<br/><br/><br/>
<button type="submit" class="btn-create-account">Create Account</button>
</body>
</html>