1.11M Members

A Simple HTML Login page using JavaScript

 
0
 

The Code Given is for only beginners in HTML
1.The code implements a simple login form
2.It checks whether the password and usernames are matching or not
3.While you are using replace the predefined username and password that I'v given
that is replace "myuserid" and "mypswrd" with your own userid and password.
4.just copy the file and paste it in the notepad.
5.and save it with an extension of .html or .htm
6.select 'All Files' from the popupmenu shown at the bottom of notepad before saving.
7.Now you will get a document that has the symbol of internet explorer.
8.just open that file and if the computer ask for script activation press ok.
9.Now run your page
10.You can customize the page by applying CSS.
Try it....
It's Your friend,,,
Rajeesh.N.Santhu

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
  {
    window.open('target.html')/*opens the target page while Id & password matches*/
  }
 else
 {
   alert("Error Password or Username")/*displays error message*/
  }
}
</script>
</body>
</html>
 
0
 

well this is good worked but can you give example as we have to create switch case with something like goto..

 
1
 

Good for begginers
__________________

 
0
 

Quick and simple. I like it. Be nice to add multiple user logins.

 
0
 

really thank u

 
1
 

But........really it has no point :S

More than login page, it shows how a if works.

 
0
 

Good for begginers

 
0
 

As a beginner's study-case, this is nice, thumbs up for that, but...

Where's the mention about that storing login-information in javascript is anything but secure? This stuff is useful only for a toy or studying how things work, and should never be actually used on a real web-page, and this should be clearly mentioned somewhere in the original post. If you think that "every people will realize things like that", you're so absolutely wrong.

@riahc3:
I've been working with javascript for years, but "this.form" inside input-element is new thing for me.

 
2
 

Anyone can read the javascript source code from the web page, and figure out the password.

 
0
 

huhhh.. then is not secure...

 
0
 

Is there a more secure way to do this? As mentioned before, one can open the page in inspect element and see the username and password. I was thinking a separate JavaScript file where multiple users can be saved and stored with less risk. Can anyone help me out?

 
2
 

I was thinking a separate JavaScript file where multiple users can be saved and stored with less risk.

Still the same problem that all files are readable. You'll need to use a server-side script to validate.

 
0
 

ANY clientside validation of users MUST be considered visible. In order to be secure, the connection must be encrypted (https) AND validation done on the server. For low value, low risk applications, https might be skipped, but clientside login validation is as safe as taping your house key to the outside of your door.

 
0
 
<script type = "text/javascript">

// Note: Like all Javascript password scripts, this is hopelessly insecure as the user can see 
//the valid usernames/passwords and the redirect url simply with View Source.  
// And the user can obtain another three tries simply by refreshing the page.  
//So do not use for anything serious!

var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["username1", "username2", "username3", "username4"];  // as many as you like - no comma after final entry
var pwArray = ["password1", "password2", "password3", "password4"];  // the corresponding passwords;

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Login was sucessfully processed.  You will be redirected to the members page now.");
window.location = "http://www.google.com";
return false;
}

var t = " tries";
if (count == 1) {t = " try"}

if (count >= 1) {
alert ("Invalid username and/or password.  You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}

else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}

}

</script>

<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>

</form>
 
0
 

thnx... i felt it really helpful as m jus a beginner

 
0
 

suppose if we have a login screen on domain.com and we redirect the page to domain.com/dashboard after login. Here domain.com/dashboard can still be accessed if the visitor puts that in browser directly.
Any solution for that.
Further the password would be still visible from the source code.

 
1
 

Sud, the op is long gone, its three years old

the code, was garbage then, is garbage now

Clientside is not where login is managed,
thats a server function

every blog or cms includes user management, from wordpress up down and sideways, to custom written applications

You
Post:
Start New Discussion
Tags Related to this Article