This is very easy to follow me and create a login form in javascript.
first are you open your notepad or sublime. then create one form and body up some javascript code write. The example here is.
example :-
first, create an index.html file.
note:-
username :- khushal
password :- 3640
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<style>
h1{
text-align: center;
}
div{
border:2px solid #000;
width: 400px;
height: auto;
margin: 50px auto;
text-align: center;
}
input{
padding: 10px;
margin: 10px;
}
button{
background: blue;
width: 150px;
padding: 10px;
color: #fff;
margin-bottom: 10px;
}
</style>
<body>
<h1>login form in Javascript</h1>
<div>
<input type="text" name="text" id="username" placeholder="username"> <br>
<input type="password" name="test" id="password" placeholder="password"><br>
<button onclick="login()">Login</button>
</div>
<script>
function login()
{
var user=document.getElementById('username').value;
var pass=document.getElementById('password').value;
if (user=='khushal' && pass=="3640") {
location.assign("demo.html");
}
else{
window.alert("login failed");
}
}
</script>
</body>
</html>now create demo.html file.
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
</head>
<style>
h1{
text-align: center;
}
a{
background: blue;
width: 150px;
padding: 10px;
margin-bottom: 10px;
color: #fff;
}
</style>
<body>
<h1>Welcome</h1>
<hr>
<h2>Login Successfully</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="index.html">logout</a>
</body>
</html>output:-
