Login form in javascript | validation in javascript -oklesson

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 -->

          <div class="background">
            <h1>Enter Details & Login</h1>
            <form name="myform" onsubmit="form()">
             USERNAME:<br>
             <input type="text" name="name" placeholder="Enter Name"><br><br>
             PASSWORD:<br>
            <input type="password" name="password" placeholder="Enter password"><br><br><br>
            <input type="submit" value="login" class="button">  <br>
            </form></div>

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-->

 *{
margin:0;
padding:0;
}
form{
color: red;
}
input{
height:10%;
width:25%;
border: 2px solid blue;
border-radius:6px;
background-color: pink;
font-weight: bolder;
}
.button{
background-color:white;
color:black;
font-size:20px;
font-style:italic;
}
.background{
height:250px;
width:100%;
text-align:center;

background-image: linear-gradient(orange,white,green);
justify-content: center;
align-item:center;
}
h1{
color:white;
font-style: italic;
}

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=="uttamkumar")&&(password=="9090"))
 {
 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 (uttamkumar), and password (9090), 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.
*SHARE WITH FRIENDS*

download pdf