How To Create Login Form Using JavaScript

Submitted by alpha_luna on Wednesday, April 6, 2016 - 14:14.
In this tutorial, we are going to learn on How To Create Login Form Using JavaScript. This is simple Login Page using a simple script. The Username is username and the Password is password. But you can change this after you download the source code below, and go to the script to make it change. Then, create a target page. This is the Login Page: login page This is the Target Page: target page Username: username Password: password

Direction:

First Step: Kindly copy this code into the BODY tag of your Login Page.
  1. <script language="javascript">
  2.  
  3. function loginPage(form) {
  4. if (form.userName.value=="username") {
  5. if (form.passWord.value=="password") {              
  6. location="home.html"
  7. } else {
  8. alert("Incorrect detail Password")
  9. }
  10. } else {  alert("Incorrect detail Username")
  11. }
  12. }
  13.  
  14. </script>
  2.  
  4.  
  5. <table cellpadding="5" cellspacing="5">
  6. <tr>
  7.         <td colspan="3">
  8.                 <h1 style="text-align:center;">
  9.                         Login
  10.                 </h1>
  11.         </td>
  12. </tr>
  13. <tr>
  14.         <td>
  15.                 <h2>Username</h2>
  16.         </td>
  17.         <td width="10">
  18.         </td>
  19.         <td>   
  20.                 <input type="text" name="userName" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Username">
  21.         </td>
  22. </tr>
  23. <tr>
  24.         <td>
  25.                 <h2>Password</h2>
  26.         </td>
  27.         <td width="10">
  28.         </td>
  29.         <td>
  30.                 <input type="password" name="passWord" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Password">
  31.         </td>
  32. </tr>
  33. <tr>
  34.         <td colspan="3" style="text-align:center;">
  35.         <br />
  36.                 <input type="button" value="Login" onClick="loginPage(this.form)" style="margin-right:20px; border-radius:4px; background-color:skyblue; font-size:18px; cursor:pointer;">
  37.                 <input type="reset" value="Reset" style="font-size:18px; cursor:pointer; border-radius:4px; background-color:orange;">
  38.         <br />
  39.         <br />
  40.         </td>
  41. </tr>
  43.  
  44. </form>
  45.  
Second Step: This source code below is simple Target Page. You can change or make one of your Target Page.
  1. <!DOCTYPE html>
  4.         <title>
  5.                 This is the next page.
  6.         </title>
  7.        
  8.         <style type="text/css">
  9.         </style>
  10. </head>
  11.  
  13.  
  14. <h1 style="text-align:center;">
  15.         Welcome!!! You're here.
  16. </h1>
  17.  
  18. </body>
  19.  
  20. </html>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.
Tags
Username
Password
Creating a Login Form using JavaScript
Login Form

Comments

Submitted by Ryan Bergafce (not verified) on Fri, 03/31/2023 - 21:21

LOOK, ITS A GOOD IDEA BUT NOT GOOD ENOUGH. SHOW ME THE REAL CODE, PLEASE

Submitted by Heal Lab (not verified) on Fri, 06/23/2023 - 17:25

Heal At Home

Add new comment

About text formats