Creating a Login Form using JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 889 times.

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.