Creating a Login Form using JavaScript

In this tutorial, we will going to create a program that has a login form using the JavaScript Now let's start this tutorial! 1. Open Notepad++. Create a new file and name it as login.html. 2. Create open ang close tags for HTML, Title, and the Body. 3. Now, in the body, have this code below:
  1. <form name="loginform" onSubmit="return validateForm();" method="get">
  2. <label>Username</label>
  3. <input type="text" name="usr" placeholder="username">
  4. <label>Password</label>
  5. <input type="password" name="pword" placeholder="password">
  6. <input type="submit" value="Login"/>
  7. </form>
In the code above, we have created a form name of loginform which has labels of username and passwordm, a textfield for username and a passwordfield, and one button also. If we will click the button, it will go to the validateForm function. 4. Lastly, we will create the validateForm function. Have this code below:
  1. <script>
  2. function validateForm() {
  3. var un = document.loginform.usr.value;
  4. var pw = document.loginform.pword.value;
  5.  
  6. if ((un == "admin") && (pw == "lyndon")) {
  7. alert ("Welcome to the system!");
  8. return true;
  9. }
  10. else {
  11. alert ("Login was unsuccessful, wrong username and password");
  12. return false;
  13. }
  14. }
  15. </script>
In the code above, we have created variable un as a holder of the username textfield and pw for the passwordfield. If variable un is equal to the input "admin" and variable pw is equal to the input "lyndon", then it will alert or popup to Welcome to the system. Thus, the user inputted a correct username and password. Otherwise, it will alert the the inputs are incorrect. Full source code:
  1. <html>
  2. <title>Login Form </title>
  3. <body>
  4.  
  5. <form name="loginform" onSubmit="return validateForm();" method="get">
  6. <label>Username</label>
  7. <input type="text" name="usr" placeholder="username">
  8. <label>Password</label>
  9. <input type="password" name="pword" placeholder="password">
  10. <input type="submit" value="Login"/>
  11. </form>
  12.  
  13. <script>
  14. function validateForm() {
  15. var un = document.loginform.usr.value;
  16. var pw = document.loginform.pword.value;
  17.  
  18. if ((un == "admin") && (pw == "lyndon")) {
  19. alert ("Welcome to the system!");
  20. return true;
  21. }
  22. else {
  23. alert ("Login was unsuccessful, wrong username and password");
  24. return false;
  25. }
  26. }
  27. </script>
  28.  
  29. </body>
  30. </html>
Best Regards, Engr. Lyndon Bermoy IT Instructor/System Developer/Android Developer/Freelance Programmer If you have some queries, feel free to contact the number or e-mail below. Mobile: 09488225971 Landline: 826-9296 E-mail:[email protected] Add and Follow me on Facebook: https://www.facebook.com/donzzsky Visit and like my page on Facebook at: https://www.facebook.com/BermzISware

Add new comment