How to Create login page using html css and javascript.
in this tutorial we making a login page with the help of html,css and js.this page we create awesome animated inputs. when you focus on input the input text go on top.
so let's start it
First of all we take a "section" tag the create one "div" now give a heading in "h1" after heading take a "form" tag give id "login" use the "method" "get".
As after that create "input" give id "uname" the create one "label" give class "ch1" in label write 'enter your name'.
now create two more inputs and labels one for 'email' and another for password.
now create submit button give class "button" and also add "onClick" function give to function name "login()"
now close all the tages etc form, div and section.
your code should be like that
<section>
<div>
<h1>Please Submit This Form</h1>
<form id="login" method="get">
<input type="text" id="uname">
<label for="" class="ch1">Enter Yuor Name</label>
<br>
<input type="password" id="pass">
<label for="" class="ch2">your Password</label><br>
<input type="email">
<label for="" class="ch3" id="email">Your Email</label>
<br>
<input class="button" type="button" name="log" id="log" value="log in here" onclick="login();">
</form>
</div>
</section>
Completing of Html code let's start the Css Code for designing the form
first add these code in your css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
background: lightseagreen;
}
style the section like this
section{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
heading should be like this
section h1{
font-size: 2rem;
letter-spacing: 5px;
font-family: fantasy;
position: absolute;
top: 4rem;
left: 30%;
color: #fff;
text-align: center;
}
give width 80% to the div background is your Choice
section div{
width: 80%;
height: 350px;
border-radius: 15px;
box-shadow: 4px 1px 8px 1px #fff;
background: darkcyan;
}
your form look like this
form{
width: 90%;
height: 50%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
Effective looking input design you add this code
input{
width: 80%;
height: 50px;
margin: 20px 0;
outline: none;
border: 4px solid #fff;
background:darkcyan;
}
if you want to change the input text so write 'input[type="text"]'
now ypu can customize you input text.
input[type="text" i],input[type="password" i],input[type="email" i]{
color:#fff;
font-weight: bolder;
font-size: 1.3rem;
padding-left: 2rem;
}
after design the input target the label which give you a class "ch1"
.ch1{
position: absolute;
top: 29%;
left: 30%;
color: #fff;
font-family: monospace;
font-weight: bolder;
transform: translate(-50%);
pointer-events: none;
transition: all .8s ease;
}
now we using focus selector your code should be like this
input:focus + .ch1{
font-size: 15px;
top: 25%;
padding: 5px;
background:darkcyan;
}
another label which is give a class "ch2"
.ch2{
position: absolute;
top: 42%;
left: 30%;
color: #fff;
font-family: monospace;
font-weight: bolder;
transform: translate(-50%);
pointer-events: none;
transition: all .8s ease;
}
same process
input:focus + .ch2{
font-size: 15px;
top: 38%;
padding: 5px;
background:darkcyan;
}
also same process here
.ch3{
position: absolute;
top: 56%;
left: 28%;
color: #fff;
font-family: monospace;
font-weight: bolder;
transform: translate(-50%);
pointer-events: none;
transition: all .8s ease;
}
input:focus + .ch3{
font-size: 15px;
top: 52%;
padding: 5px;
background:darkcyan ;
}
now design the button we take a class name "button"
.button{
padding: 15px 60px;
font-size: 1.2rem;
letter-spacing: 5px;
cursor: pointer;
color: #fff;
font-weight: bolder;
background:#2c515f;
outline: none;
border: none;
border-radius: 10px;
transition: all .4s;
}
for more Effective add hover animation to the button
.button:hover{
background: #436a79;
}
So your Css code is Completed now we add the javascript logic.
javascript code
come to your html file and where close the body tag eg "</body>" create here "script" tage. script tag is use to add javascript code internal in you html file if you want to make external you should create another file. javascript file save with .js and link to your html file.
link the js file like this
<script src="index.js"></script>
in internal adding the code
<script type="text/javascript">
function login() {
var username = document.getElementById('uname').value;
var password = document.getElementById('pass').value;
var email = document.getElementById('email').value;
if (username == 'hamza' && password == '4433') {
console.log('login successfully');
location.assign('file:///E:/Sublime%20Text%203/more%20designs/digt%20clock.html');
}
else{
window.alert('wrong password or username');
}
}
</script>
So Today This is it . I hope this content helpful for you.
0 comments:
Post a Comment