Login form in javascript | validation in javascript
Do
you want to make a form, and also find out whether the detail going on
in the form is correct, or incorrect. In today's post login form in
javascript, we will see how we will create a validation form using HTML,
CSS and javascript, in which we will enter some data and then check the
value added in the form. it is very easy to create this form, you have
some basic knowledge of HTML, CSS and javascript, to know how we write
code, first of all know this, After all, this form works.
First of all, when we write javascript, we will add some value to by default, whenever a user enters a value, and as soon as clicking on the Login button, that value will first match in JavaScript, if the detail entered matches, then you will Show "You sucessfully Login". Now we know in detail what we have used to make the form.
Login Form In Javascript
HTML :- Whenever we do any work related to a web document, first of all we use HTML, because HTML works, adding an element to any web document. And once the element is added, then we can use it, to create this form we have only used 3 input type tags, in which the user will enter his username and password in two input type tags, And the last input type has a login button, when the user enters his details, he can login. This was just HTML work, and if you want to show it well, you can make it even better by using CSS.<!--html start here -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fa fa-user" style="font-size: 24px;"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" placeholder="Password" name="" value="">
</div>
</div>
</body>
</html>
CSS :- You
will know that we use HTML to add elements to a web document, and CSS
works, where and how to show that element, you can create the form
without using CSS. We can, but in this form we have used some CSS. You
can see how much the CSS code is written.
<!--CSS start here-->
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #310310;
background-size: cover;
}
.login-box{
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
}
.login-box h1{
float: left;
font-size: 40px;
border-bottom: 6px solid #4caf50;
margin-bottom: 50px;
padding: 13px 0
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #4caf50;
}
.textbox i{
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 80%;
font: left;
margin: 0 10px;
}
.btn{
width: 100%;
background: none;
border: 2px solid #4caf50;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
Javascript :- This
entire form is based on JavaScript only. Because without this the form
cannot be validated. We had to use javascript to vailidate this form.
And in this form, we have only used the IF ELSE statement. So that the
code is not too complicated.
<!--Javascript star here-->
<script>
function form()
{
var name= document.myform.name.value;
var password= document.myform.password.value;
if((name=="")&&(password==""))
{
alert("detail is required");
}
else if((name=="ArticleCenter")&&(password=="023023"))
{
document.write("<center><b>You sucessfully Login</center>");
return false;
}
else {
alert("invalid detail");
}
} </script>
In this JavaScript code, we have given by default username (ArticleCenter), and password (023023), if
a user enters these details, it will be sucessfull login or else he
will get the alert box repeatedly. You can change the username and
password if you want, this type of form validation is called frontend
form validation, this form validation is not secure for our web page, it
is made from learning purpose only. We use PHP to validate the form in
our web page, which we call Backend Form Validation, and it is secure.
In this way we can make a form. Below you will find a real form, if you
want, please fill it and check it once.
if
you liked this post login form in Javascript, then you must tell by
commenting, if you want information about any of these syntax, then you
can comment and ask. In the next post we will talk about how we will
make localhost on android phone and run PHP t. You must subscribe to our
blog via e-mail. So that you can get notifications as soon as new posts
arrive, about which you need information, you can comment that topic.
0 Comments